CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Pratyaksh Saini
Pratyaksh Saini

Reputation: 113

How to convert custom css to Material UI CSS in JS

There is this project, someone wrote components with custom css in it.

There is this thing I saw in it This is a wrapper component similar to Container in Material ui, or just a div wrapper which just apply 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]};
`;

but i don't understand the p.marginTop, p.theme, and all others

but now i want to just convert the thing to simple div wrapper and give it style property the material ui way.

some thing like this

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]},
  }
}))

but all the commented lined in it, were showing errors, saying it doesn't recognizance p.

(previously those p.theme things, I found a work around, there was a had a theme.js file, from where i could import all the p.theme.spacing.sm, but I don't understand what p.padding or p.maxWidth are)

Please help me understanding this.

Upvotes: 0

Views: 887

Answers (1)

Francinette Borges
Francinette Borges

Reputation: 36

To stylize the material-ui component Container, try this:

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>
    )
}

All the configurations defined by you in useStyles for container will be applied on component Container.

You can also do your own component, creating a new file like this:

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;

After you've created your own component you'll can import it in any file you would like.

Upvotes: 1

Related Questions