Styling (CSS)

Next Generation CSS

This boilerplate uses jss with react-jss for styling react components. jss allows you to write actual CSS inside your JavaScript. There are many ways to style react applications, but we choose jss , before migrate to styled-components

Linting

To complement jss, this architecture also has a CSS linting setup. It uses stylelint which will help you stay consistent with modern CSS standards. Read about it here.

CSS Support

We support and recommend the use of jss. We also support the use of CSS stylesheets.

There are many ways to style web applications, unfortunately, we cannot support them all.

jss

Below creates a react components (<Button> and renders them as children of the <App> component:

import React from 'react';
import {createUseStyles} from 'react-jss'


const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      // jss-plugin-expand gives more readable syntax
      top: 5, // jss-plugin-default-unit makes this 5px
      right: 0,
      bottom: 0,
      left: '1rem'
    },
    '& span': {
      // jss-plugin-nested applies this to a child span
      fontWeight: 'bold' // jss-plugin-camel-case turns this into 'font-weight'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
})

const Button = ({children}) => {
  const classes = useStyles()
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

const App = () => <Button>Submit</Button>

render(<App />, document.getElementById('root'))

For more information about react-jss see https://cssinjs.org/react-jss

Stylesheet

Webpack allows you to import more than JavaScript. Using the css-loader you can import CSS into a JavaScript:

Button.css

.danger {
  background-color: #c30000;
}

Button.js

import React from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

function Button() {
  // You can use them as regular CSS styles
  return <button className="danger">Click me</button>;
}

For more information about Stylesheets and the css-loader see https://github.com/webpack-contrib/css-loader