Как мне кодировать css как jss для материалов-стилей пользовательского интерфейса? - PullRequest
Новая
       71

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

0 голосов
/ 02 апреля 2020

У меня есть некоторые основы c 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',
    },
  },
}))

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

1 Ответ

0 голосов
/ 03 апреля 2020

Вы можете попытаться создать свой собственный пользовательский хук в файле 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>
  );
...