如何在 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 => ({

  container: {

    marginTop: "100px",

    position: "relative",

    ...

  },

}));

export default function App(){

    const classes = useStyles();

    return (

        <Container className={classes.container}>

          ...

        </Container>

    )

}

您在 useStyles 中为容器定义的所有配置都将应用于组件容器。

你也可以做你自己的组件，像这样创建一个新文件：

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;

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