如何将 css 编码为 material-ui 样式的 jss？

Question

我有一些基本的 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',
    },
  },
}))

甚至背景颜色都没有显示，所以我想我没有点击选择器:-(有人能看出我做错了什么吗？

Answer 1

您可以尝试在 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>
  );

如何将 css 编码为 material-ui 样式的 jss？

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

css

material-ui

create-react-app

jss