如何在 JS 中将自定义 css 转换为 Material UI CSS

Question

有这个项目，有人在其中编写了带有自定义 css 的组件。

我在里面看到了这个东西 这是一个类似于Material ui中的Container的wrapper组件，或者只是一个应用css的div wrapper。

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 包装器，并以 material ui 的方式赋予它样式属性。

像这样的事情

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 的东西，我找到了解决办法，有一个 theme.js 文件，我可以从那里导入所有 p.theme.spacing.sm，但我不明白什么是 p.padding 或p.maxWidth 是）

请帮助我理解这一点。

Answer 1

要风格化 material-ui 组件容器，试试这个：import Container from '@material-ui/core/Container';import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles(theme => ({&nbsp; container: {&nbsp; &nbsp; marginTop: "100px",&nbsp; &nbsp; position: "relative",&nbsp; &nbsp; ...&nbsp; },}));export default function App(){&nbsp; &nbsp; const classes = useStyles();&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Container className={classes.container}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; </Container>&nbsp; &nbsp; )}您在 useStyles 中为容器定义的所有配置都将应用于组件容器。你也可以做你自己的组件，像这样创建一个新文件：import styled from "styled-components";const Container = styled.div`&nbsp; margin-top: 100px;&nbsp; margin-left: 320px;&nbsp; margin-right: 40px;&nbsp; h1 {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; min-height: auto;&nbsp; &nbsp; font-weight: 500;&nbsp; &nbsp; font-family: "Roboto", Helvetica, Arial, sans-serif;&nbsp; &nbsp; margin-bottom: 3px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #413e3e;&nbsp; }`;export default Container;创建自己的组件后，您可以将其导入任何您想要的文件中。