Overriding Styles in Material UI in React

How to override css properties of Material UI components

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.

Can you overwrite styles in Material UI using css/scss?

Below is the correct syntax:

.button {
  padding: 10px;
  margin-bottom: 10px;
  &:global(.MuiButton-containedPrimary) {
    border: 2px solid red;
    background-color: red;
  }
}

The example above has two key changes:

1. Using :global(.MuiButton-containedPrimary). Without using :global, CSS modules will transform the MuiButton-containedPrimary into a class name unique to this module and then it won't match what Material-UI puts on the button.

2. Adding the & in front effectively creates a selector like .button.MuiButton-containedPrimary matching an element with both classes on it. Your original syntax would treat .MuiButton-containedPrimary as a descendant selector and only match elements with that class that are a descendant of the button rather than the button itself.

Overriding Styles in Material UI in React

Below is the correct syntax. The changes compared to your code sandbox are:

1. Replace .columnsContainer with .MuiDataGrid-columnsContainer
2. Correct the borderBottom syntax to be 1px solid blue instead of 1px solid 'blue' !important.

export default {
  root: {
    backgroundColor: "white",
    border: `1px solid green`,
    "& .MuiDataGrid-columnsContainer": {
      borderBottom: `1px solid blue`
    }
  }
};

Cant override styles of nested Material UI components

Your code is correct for the most part and your problem is not related to MUI or React, but CSS specificity. You are trying to overwrite

.MuiCardContent-root:last-child

and the added pseudo class results in a higher specificity than your .jss14 (makeStyles-root-14 in development) class. Ideally you always mimic the selector you are trying to overwrite, in this case:

  root: {
    // other styles
    "&:last-child": {
      paddingBottom: 0
    }
  }

and in case of doubt, you can simply increase specificity step by step by adding additional & to your selector until it works:

  root: {
    // other styles
    "&&": {
      paddingBottom: 0
    }
  }

How to combine overrides in Material UI (React) - overwrite both theme styles and component styles

This code works perfect for me:

import React from 'react';
import './App.css';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button, Container } from '@mui/material';

let theme = createTheme({});

theme = createTheme(theme, {
  components: {
    MuiContainer: {
      styleOverrides: {
        maxWidthLg: {
          [theme.breakpoints.up('lg')]: {
            maxWidth: 1280
          },
        }
      }
    }
  },
  palette: {
    brand: '#0D3B66',
    primary: {
      main: '#4caf50',
    },
  },
  typography: {
    fontFamily: '"Mukta", sans-serif',
    fontWeight: 400,
    h1: {
      fontSize: 24,
    },
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <Button>Primary</Button>
      </Container>
    </ThemeProvider>
  );
}

export default App;

You can see the result:

How to override material-ui css with styled component?

It looks like there's a nice example on how to do this in the material-ui docs: https://material-ui.com/guides/interoperability/#styled-components

One thing you seem to be missing is the StylesProvider, which allows your styles to override the default material styles. This seems to work... I don't deal with the conditional in your example, but I don't think that's part of your problem here.

const MyStyledButton = styled(Button)`
  background-color: red;
  color: white;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <MyStyledButton color="primary">Foo</MyStyledButton>
      </div>
    </StylesProvider>
  );
}

Here's a codesandbox: https://codesandbox.io/s/infallible-khorana-gnejy

---

Related Topics