Stylizowanie

Przykłady pochodzą z publikacji:https://krasimir.gitbooks.io/react-in-patterns/content/

Składnia JSX jest bardzo zbliżona do składni HTML. W związku z tym mamy prawie takie same atrybuty tagów i możemy nadal używać klas CSS. Klasy zdefiniowane w zewnętrznym pliku.css. Jedynym zastrzeżeniem jest użycieclassName, a nieclass. Na przykład:

<h1 className='title'>Styling</h1>

Styleinlinetakżedziała dobrze. Podobnie jak w HTML, możemy dowolnie przekazywać style za pomocą atrybutustyle. Jednak podczas gdy w HTML wartość jest łańcuchem, w JSX musi to być obiekt.

const inlineStyles = {
  color: 'red',
  fontSize: '10px',
  marginTop: '2em',
  'border-top': 'solid 1px #000'
};
<h2 style={ inlineStyles }>Inline styling</h2>

Ponieważ piszemy style w JavaScript mamy pewne ograniczenia z punktu widzenia składni. Jeśli chcemy zachować oryginalne nazwy właściwości CSS, musimy umieścić je w cudzysłowach. Jeśli nie, musimy postępować zgodnie z konwencją camelCase.

Pisanie stylów w JavaScript daje dodatkkowe możliwości - na przykład dziedziczenie stylów:

const theme = {
  fontFamily: 'Georgia',
  color: 'blue'
};
const paragraphText = {
  ...theme,
  fontSize: '20px'
};

Moduły CSS

PlikiCSSmozemy importować do jsx:

/* style.css */
.title {
  color: green;
}
// App.jsx
import styles from "./style.css";
function App() {
  return <h1 style={ styles.title }>Hello world</h1>;
}

Stylizowane komponenty

Zobaczmy przykład komponentLink, który ma pewne style i użycie, zamiast znacznika<a></a>.

const Link = styled.a`
  text-decoration: none;
  padding: 4px;
  border: solid 1px #999;
  color: black;
`;
<Link href='http://google.com'>Google</Link>

Dostępny jestmechanizm rozszerzania klas:

const AnotherLink = styled(Link)`
  color: blue;
`;
<AnotherLink href='http://facebook.com'>Facebook</AnotherLink>

Dla mnie stylizowane komponenty są prawdopodobnie zdecydowanie najciekawszym podejściem do stylizacji w React. Łatwo jest tworzyć komponenty do wszystkiego i zapomnieć o stylizacji.

Zobacz przykład [033]