Javascript 如何在JS中将自定义css转换为材质UI css

有一个项目，有人编写了带有自定义css的组件

我在里面看到了这个东西 这是一个包装器组件，类似于MaterialUI中的容器，或者只是一个只应用css的div包装器

export const Container = styled.div`
  position: relative;
  margin: 0 auto;
  margin-top: ${p => p.marginTop ? p.theme.spacing[p.marginTop] : 0};
  width: 100%;
  max-width: ${p => (p.maxWidth && p.theme.screen[p.maxWidth])};
  padding: ${p => p.padding ? `0 ${p.theme.spacing[p.padding]}` : `0 ${p.theme.spacing.sm}`};
  z-index: ${p => p.zIndex && p.theme.zIndex[p.zIndex]};
  background-color: ${p => p.color && p.theme.colors[p.color]};
  border-radius: ${p => p.radius && p.theme.radius[p.radius]};
`;

但是我不明白p.marginTop，p.theme，还有其他的

但现在我只想将它转换为简单的div包装器，并将其样式属性赋予materialui方式

像这样的东西

const useStyles = makeStyles((theme) => ({
  container: {
    position: 'relative',
    margin: '0 auto',
   // margin-top: ${p => p.marginTop ? p.theme.spacing[p.marginTop] : 0},
    width: '100%',
   // max-width: ${p => (p.maxWidth && p.theme.screen[p.maxWidth])},
  //  padding: ${p => p.padding ? `0 ${p.theme.spacing[p.padding]}` : `0 ${p.theme.spacing.sm}`},
    padding: themeIntance.spacing.sm,
  //  z-index: ${p => p.zIndex && p.theme.zIndex[p.zIndex]},
 //   background-color: ${p => p.color && p.theme.colors[p.color]},
 //   border-radius: ${p => p.radius && p.theme.radius[p.radius]},
  }
}))

但是所有的评论都显示了错误，说它不符合p

（以前那些p.theme的东西，我找到了解决办法，有一个had-a-theme.js文件，从那里我可以导入所有p.theme.spating.sm，但我不明白p.padding或p.maxWidth是什么）

---

请帮助我理解这一点。

要设置材质ui组件容器的样式，请尝试以下操作：

import Container from '@material-ui/core/Container';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  container: {
    marginTop: "100px",
    position: "relative",
    ...
  },
}));

export default function App(){
    const classes = useStyles();
    return (
        <Container className={classes.container}>
          ...
        </Container>
    )
}

---

创建了自己的组件后，您可以将其导入任何您想要的文件。

我的目标是删除样式化组件，这就引出了一个问题，“p”代表什么？以及如何转换为makestyles css。“P”可能是为正在修改容器的文件导入的变量或组件，它必须出现在文件的开头，其中是第一段代码。该错误一定发生了，因为在放置第二段代码的位置没有导入p。在这种情况下，如果不再使用p，那么带有makestyles的css配置应该可以工作。记住，要使用makestyles，你不能在ex中使用'margin top'或'max width'，但是css配置中的'marginTop'和'maxWidth'是正确的。很抱歉，我刚刚发现'p'是一些“传递的道具”，对于一个样式化组件，你有兴趣签出这个名为“样式化组件”的react pkg吗，它使定制react组件变得非常容易。

import styled from "styled-components";

const Container = styled.div`
  margin-top: 100px;
  margin-left: 320px;
  margin-right: 40px;

  h1 {
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: auto;
    font-weight: 500;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    margin-bottom: 3px;
    text-decoration: none;
    color: #413e3e;
  }
`;

export default Container;