How do I encode css as jss for material-ui styles?

Question

I have some basic CSS I'd like to encode as JSS and place in the global Styles.js file.

Here's the CSS:

.formdetail {
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 3fr;
  margin: 20px;
}

.formdetail .cell {
  display: flex;
  background: rgb(243, 243, 243);
  padding: 4px;
  align-items: center;
}

.cell:nth-child(2n + 1) {
  font-style: italic;
  padding-right: 0.5em;
  justify-content: flex-end;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  background: rgba(111, 163, 179, 0.5);
}
.cell:nth-child(2n) {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

Here's what I thought it was supposed to look like:

import { makeStyles } from '@material-ui/core/styles'

export const Styles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: 'left',
    color: theme.palette.text.secondary,
  },
  formdetail: {
    display: 'grid',
    gridRowGap: '10px',
    gridTemplateColumns: '1fr 3fr',
    margin: '20px',
  },
  cell: {
    display: 'flex',
    background: 'rgb(243, 243, 243)',
    padding: '4px',
    alignItems: 'center',

    '&:nth-child(2n + 1)': {
      fontStyle: 'italic',
      paddingRight: '0.5em',
      justifyContent: 'flex-end',
      borderTopLeftRadius: '1em',
      borderBottomLeftRadius: '1em',
      background: 'rgba(111, 163, 179, 0.5)',
    },
    '&nth-child(2n)': {
      borderTopRightRadius: '1em',
      borderBottomRightRadius: '1em',
    },
  },
}))

Not even the background colours are showing up, so I guess I'm not hitting the selectors:-( Can any see what I'm doing wrong?

Answer 1

You can try to create your own custom hook in the Styles.js file:

export const useMyStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
      flexGrow: 1,
    },
    paper: {
      padding: theme.spacing(1),
      textAlign: 'left',
      color: theme.palette.text.secondary,
    },
    formdetail: {
      display: 'grid',
      gridRowGap: '10px',
      gridTemplateColumns: '1fr 3fr',
      margin: '20px',
    },
    cell: {
      display: 'flex',
      background: 'rgb(243, 243, 243)',
      padding: '4px',
      alignItems: 'center',

      '&:nth-child(2n + 1)': {
        fontStyle: 'italic',
        paddingRight: '0.5em',
        justifyContent: 'flex-end',
        borderTopLeftRadius: '1em',
        borderBottomLeftRadius: '1em',
        background: 'rgba(111, 163, 179, 0.5)',
      },
      '&nth-child(2n)': {
        borderTopRightRadius: '1em',
        borderBottomRightRadius: '1em',
      },
    }
  })
);

And in order to use it in a component you can use it the same way as you use the useStyles hook:

import useMyStyles from 'global/Styles'

const MyComponent = () => {
  const classes = useMyStyles();

  return (
    <div className={classes.root}>
      //inner html
    </div>
  );