如何将 div + useStyles 转换为 @emotion/styled 的样式？

Question

我无法将应用到 div 的 material-ui makeStyles 转换为我的自定义 div 样式，该样式是根据情感设计的。

以下代码是我要转换的代码：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      '& > *': {
        margin: theme.spacing(2),
        width: theme.spacing(23),
        height: theme.spacing(23),
      },
      padding: '10px 10px',
    },
  }),
);

在 div 中使用，如本例所示：

<div className={classes.root}>someContent</div>

和我用样式制作的自定义 div 看起来像这样，但问题是这些选项没有应用。（旁注：我正在使用来自@material-ui/core/styles 的 ThemeProvider 来提供主题）

const CustomDiv = styled.div<{ theme: Theme }>`
  display: 'flex',
  flexWrap: 'wrap',
  '& > *': {
    margin: ${(props) => props.theme.spacing(2)},
    width: ${(props) => props.theme.spacing(23)},
    height: ${(props) => props.theme.spacing(23)},
  },
  padding: '10px 10px',
`;

求助:)

Answer 1

我弄明白了（使用的语法错误），我的 customDiv 应该是这样的：

export const StyledDiv = styled.div<{ theme: Theme }>`
  display: flex;
  flex-wrap: wrap;
  > * {
    margin: ${(props) => props.theme.spacing(2)}px;
    width: ${(props) => props.theme.spacing(23)}px;
    height: ${(props) => props.theme.spacing(23)}px;
  }
  padding: 2px 10px;
`;

如何将 div + useStyles 转换为 @emotion/styled 的样式？

How to convert div + useStyles to styled from @emotion/styled?

emotion

typescript

reactjs

material-ui

styled-components