How to override css properties of Material UI components

Question

I am working on project in which I have to use Material UI, just for simplicity, consider I am having a simple functional component in which I am having 2 Material UI components Button and Text Field

import React from 'react';
import { Button, TextField } from '@material-ui/core';

function RenderComponent(){
    return(
        <>
            <Button variant="contained">Contained</Button>
            <TextField id="outlined-basic" label="Outlined" variant="outlined" />
        </>
    )
}

export default RenderComponent

Can anyone please tell me how to override the css properties of these 2 Material UI components.

Thankyou 🙏

Rubel Biswas · Accepted Answer · 2021-12-09 06:30:34Z

There are several ways to do this, you can directly override the built-in CSS class of an MUI component using the class name in your imported CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to .MuiButton-root class on your "CSS" file. Like bellow.

.MuiButton-root{
   color: white;
   height: 20px;
   padding: 10px;
}

You can also use the available props of a component, you can easily find them in their individual documentation page of mui site. Again you can use makeStyles or styled to style your component. Here is an example to use makeStyles in your Button component.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Button, TextField } from '@material-ui/core';

const useStyles = makeStyles({

    root: {
          background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
          border: 0,
          borderRadius: 3,
          boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
          color: 'white',
          height: 48,
          padding: '0 30px',
        },
     });

function RenderComponent(){
    const classes = useStyles();
    return(
        <>
            <Button className={classes.root} variant="contained">Contained</Button>
            <TextField id="outlined-basic" label="Outlined" variant="outlined" />
        </>
    )
}

export default RenderComponent

You can find more about styles here.

Hayk · Accepted Answer · 2021-12-09 05:40:54Z

1

Give them id's/classes and write your custom CSS for them. If it doesn't override the standard Material-UI styles, add the keyword !important. If you are using create-react-app, you can import CSS right to the file like this:

import "./styles.css";

If this doesn't help, that means Material-UI uses inline styles for the elements. In this case, you would have to write your CSS right into your components' attributes: like this. If it doesn't override standard styles, use !important again.

answered Dec 9, 2021 at 5:40

Hayk

1592 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to override css properties of Material UI components

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related