I need to convert some basic CSS to JSS and include it in the global Styles.js file.
The original CSS is as follows:
.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;
}
This is how I re-wrote it in JSS:
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',
},
},
}))
Unfortunately, the background colors are not displaying and I suspect I am not targeting the selectors correctly. Can anyone help me identify the issue?