Style i CSS

Jak mogę dodać klasy CSS do komponentów?

Przekaż ciąg znaków używając atrybutu className:

render() {
  return <span className="menu navigation-menu">Menu</span>
}

Klasy CSS mogą być zależne od właściwości i stanu komponentów:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Porada:

Jeśli bardzo często piszesz kod tego typu, pakiet classnames może ci pomóc uprościć swój kod.

Czy mogę użyć stylów wewnątrzliniowych?

Tak, zobacz ten artykuł, aby dowiedzieć się więcej.

Czy style wewnątrzliniowe są złe?

Klasy CSS są generalnie bardziej wydajne niż style wewnątrzliniowe.

Czym jest w CSS-w-JS?

Termin “CSS-w-JS” odnosi do wzorca, w którym CSS jest zapisywany razem z kodem JavaScript, a nie w osobnych plikach.

Pamiętaj, że ta funkcjonalność nie stanowi części Reacta, tylko dostarczana jest przez biblioteki stron trzecich. React nie ma opinii na temat sposobu definiowania stylów; jeśli masz wątpliwości, dobrym punktem wyjścia może być definiowanie stylów w osobnym pliku *.css i odnoszenie się do nich używając atrybutu className.

Czy mogę robić animacje w Reakcie?

React może być wykorzystywany do napędzania animacji. Przykłady znajdziesz na stronach React Transition Group i React Motion lub React Spring.