CODEWITHSUNDEEP
cssmaterial-uicss-selectorsjss
Tamjid
Tamjid

Reputation: 5506

How to override mui class?

I'm trying to override a default class on a material ui component but I'm unable to target it. Can someone please help me target it ?

My style:

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
          '& .MuiCardContent-root:last-child': {
           padding: '0px'
        }
    }),
);

The class I am trying to override (as you can see my overrided style is not applying): class targetting

Cheers

Upvotes: 1

Views: 6068

Answers (3)

Caio Mar
Caio Mar

Reputation: 2624

I finally got this to work! My solution is much like @Soroush's answer, except I wanted to use custom classes on the MUI component.

My solution:

AppTheme.js

The solution is in the h2 node of the theme object where I added my custom class .page-title. I could simplify this down to show only my solution, but I'll leave a few extra properties to demonstrate what else you can do.

// You can define device sizes and use it in your theme object
const allDevices = "@media (min-width:320px) and  (max-width: 1024px)";
const allPhones = "@media (min-width:320px) and  (max-width: 767px)";
const portraitPhones = "@media (min-width:320px) and  (max-width: 480px)";
const landscapePhones = "@media (min-width:481px) and  (max-width: 767px)";
const tablets = "@media (min-width:768px) and  (max-width: 1024px)";

const MuiTheme = {
  palette: {
    primary: { main: "#E54E55" },
    secondary: { main: "#26B1EF" },
  },
  typography: {
    fontFamily: [
      "Montserrat",
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
    ].join(","),
    h1: {
      fontSize: "4rem",
      fontWeight: "700",
      [allPhones]: {
        fontSize: "3.2rem",
      },
    },
    h2: {
      fontSize: "3.5rem",
      fontWeight: "700",
      [allPhones]: {
        fontSize: "2.75rem",
      },
      "&.page-title": {
        marginBottom: "120px",
      },
    },
  },
  overrides: {
    // Style sheet name ⚛️
    MuiTypography: {
      // Name of the rule
      gutterBottom: {
        marginBottom: "20px",
      },
    },
    MuiTabs: {
      flexContainer: {
        borderBottom: "1px solid #ddd",
      },
      indicator: {
        height: "3px",
        borderRadius: "5px 5px 0 0",
      },
    },
    MuiButton: {
      sizeLarge: {
        paddingTop: "15px",
        paddingBottom: "15px",
      },
    },
  },
};

export default MuiTheme;

App.js

Then in your app you can add your custom theme like so:

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import AppTheme from "./AppTheme";

<ThemeProvider theme={createTheme(AppTheme)}>
    Route and stuff ...
</ThemeProvider>;

Upvotes: 0

Tamjid
Tamjid

Reputation: 5506

This is how i ended up solving the issue: In a seperate styles.js file:

assessmentPanelContent: {
    '&.MuiCardContent-root': {
      display: 'flex',
      padding: '0px',
      flexWrap: 'wrap',
      paddingBottom: '0px'
    }
  }

Then i just applied my custom class to the element and the combination of my custom class and the MUI class i wanted to override was able to override the MUI class' styling.

Upvotes: 0

Soroush Salehi 404
Soroush Salehi 404

Reputation: 323

1- in your App.js file import { ThemeProvider } from "@material-ui/styles"

2- create your custome override style

const yourCustomTheme = {
      MuiCardContent :{
        root:{
           "&:last-child": {
            padding: '0px'
          },
        }
      }
    }

3- wrap all of your code with this

<ThemeProvider theme={createMuiTheme({ ...yourCustomTheme })}>
   Route and stuff ...
</ThemeProvider>

Upvotes: 2

Related Questions