Как преобразовать custom css в Material UI CSS in JS

Question

Есть этот проект, в нем кто-то написал компоненты с нестандартными css.

Вот что я видел в нем. Это компонент-оболочка, похожий на Container in Material ui, или просто оболочку div которые просто применяются css.

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 и присвойте ей свойство стиля материала ui way.

что-то вроде этого

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, я нашел работу, там был файл темы. 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 для контейнера, будут применены к компоненту Container.

Вы также можете создайте свой собственный компонент, создав новый файл, например:

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;

После того, как вы создали свой собственный компонент, вы можете импортировать его в любой файл, который вам нужен.