Как мне закодировать css как jss для стилей material-ui?

У меня есть базовый CSS, который я хотел бы закодировать как JSS и поместить в глобальный файл Styles.js.

Вот 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;
}

Вот как я думал, что это должно было выглядеть:

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',
    },
  },
}))

Не отображаются даже цвета фона, так что, думаю, я не нажимаю на селекторы :-( Может ли кто-нибудь увидеть, что я делаю не так?


create-react-app material-ui css jss
person Dycey    schedule 02.04.2020    source источник
comment
Я не уверен, что правильно понимаю ваш вопрос, но, возможно, преобразовать css-to- js может быть вам полезен.   -  person Jax-p    schedule 02.04.2020
comment
Было бы полезно показать код, который использует эти стили.   -  person Ryan Cogswell    schedule 02.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать создать свой собственный хук в файле Styles.js:

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',
      },
    }
  })
);

И чтобы использовать его в компоненте, вы можете использовать его так же, как и хук useStyles:

import useMyStyles from 'global/Styles'

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

  return (
    <div className={classes.root}>
      //inner html
    </div>
  );
person Venelin Banov    schedule 03.04.2020