Using <style /> blocks in React

Every once in a while you are faced with a scenario where the best course of action is to slap a <style /> block in the middle of your code.

For us, it was that time we wanted to set an arbitrary width (selected by the user) on a component, based on device’s screen size.

If it had not been contingent on the screen size, it would have been NBD and we could have set the style property right on the component. Since we needed to use a media query, we were forced to use a <style /> block.

Unfortunately, using <style /> blocks in React is easier said than done as the CSS syntax includes fancy braces that are reserved as part of the JSX syntax.

Never fear though, you can just treat the CSS syntax as a string or template literal and you are good to go:

const height = 200;

return (
  <React.Fragment>
    <style>
      {`
        @media (min-width: 768px) {
          .awesome-div {
            height: ${height}px;
          }
        }
      `}
      {'
        .inner-div {
          border: 1px solid red;
        }
      '}
    </style>
    <div className="awesome-div">
      <div className="inner-div">
        Awesome sauce!
      </div>
    </div>
  </React.Fragment>
);