How to convert custom css to Material UI CSS in JS

Question

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.

Francinette Borges · Accepted Answer · 2020-08-06 15:33:46Z

1

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.

answered Aug 6, 2020 at 15:33

Francinette Borges

362 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pratyaksh Saini Over a year ago

My aim here is to remove styled-components, which leads to question what does "p." represents? and how to convert into makestyles css.

Francinette Borges Over a year ago

'P' probably is a variable or component imported for the file where the Container is being modified, it must apper in the begin of the file where is the first piece of code. The error must be happening because the p is not being imported where you are putting the second piece of code. In this case, if you don't use p anymore, the css configuration with makestyles should work. Remember that to use the makestyles you can't put 'margin-top' or 'max-width' for ex., but 'marginTop' and 'maxWidth' for the css configuration works correctaly.

Pratyaksh Saini Over a year ago

I am so sorry, I just found out that that 'p.' is some "passed prop", for a styled-component, is u are interested checkout this react pkg called "styled-component", its makes it really easy to make custom react components.

Collectives™ on Stack Overflow

How to convert custom css to Material UI CSS in JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related