React Styling with Create React App

Question

I'm new to React.

Quotes from Create React App:

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in AcceptButton and RejectButton components, we recommend creating a Button component with its own .Button styles, that both AcceptButton and RejectButton can render (but not inherit).

Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition.

I don't think I understand it fully. Why sass nesting and mixing are less useful with composition? Any example?

Does that also mean I shouldn't have global styles, for example, for an input field? If all the input fields in my app look the same or similar, I should create a component for it, just for the styling purpose?

Answer 1

SASS nesting helps ensure your styles don't leak outside the parent class(es). With component composition, this is automatically enforced because you nest components within components.

Mixins are a way of reusing styles across selectors. With component composition, the reusing comes from composing in the JSX instead of CSS.

Old Way

CSS

.button {
  color: #fff;

  &.button-accept {
    background-color: green;
  }

  &.button-reject {
    background-color: red;
  }
}

JSX

function AcceptButton() {
  return <button className="button button-accept">Accept</button>;
}

function RejectButton() {
  return <button className="button button-reject">Reject</button>;
}

React Way

const buttonStyles = { color: '#fff' };

function Button(props) {
  return <button style={Object.assign({}, buttonStyles, props.style)}>
    {props.children}
  </button>;
}

const acceptStyles = { backgroundColor: 'green' };

function AcceptButton(props) {
  return <Button style={acceptStyles}>Accept</Button>;
}

const rejectStyles = { backgroundColor: 'red' };

function RejectButton(props) {
  return <Button style={rejectStyles}>Reject</Button>;
}

Note that this uses inline-styles, which may not be ideal in real-world situations where you repeatedly render the same element and the styles are present for each element in the DOM. To solve that, check out some of the CSS-in-JS solutions, such as JSS.

Does that also mean I shouldn't have global styles, for example, for an input field? If in my app all the input fields look the same or similar, I should create a component for it, just for the styling purpose?

That depends on whether you are using any UI framework. If you are rolling out your own from scratch, then it might be possible to do so. Otherwise, global styles are almost unavoidable.

Not that this is not a binary decision. Many of the existing CSS frameworks are not written just for React and will not play well with the CSS-in-JS approaches that React encourages.