Customizing existing Mui classes through the use of makeStyles

Question

Customizing existing Mui classes through the use of makeStyles

Recently, I made a small change in my approach to styling by moving CSS directly into my component files using styled components, emotion, and make styles. This decision was driven by the benefits of easier management and improved development experience. As I experimented with this new method on a dummy project and then on some components of a current app I'm working on, I encountered an issue with overriding existing Material-UI styles.

For instance, while creating an accordion component using Material-UI, I came across a nested property:

.MuiAccordionSummary-root.Mui-expanded {
    min-height: 64px;
}

Adjusting this in my sass file would have been simple, but I struggled to figure out how to implement it using make styles.

My current styles are structured like this:

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

I am struggling to target the specific MuiAccordionSummary element inside makestyles. It seems possible, but I'm finding it challenging due to my lack of familiarity with this method.

css reactjs material-ui

Answer 1

Answer №1

To ensure proper styling in your project, make sure to include

<StyledEngineProvider injectFirst>

at the root level

import { render } from "react-dom";
import { StyledEngineProvider } from "@mui/material";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <StyledEngineProvider injectFirst>
    <App />{" "}
  </StyledEngineProvider>,
  rootElement
);

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      backgroundColor: "red",
      color: "pink"
    }
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" className={classes.root}>
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

View a working demo here https://codesandbox.io/s/wizardly-stonebraker-qnh3t

Answer 2

To ensure proper styling in your project, make sure to include

<StyledEngineProvider injectFirst>

at the root level

import { render } from "react-dom";
import { StyledEngineProvider } from "@mui/material";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <StyledEngineProvider injectFirst>
    <App />{" "}
  </StyledEngineProvider>,
  rootElement
);

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      backgroundColor: "red",
      color: "pink"
    }
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" className={classes.root}>
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

View a working demo here https://codesandbox.io/s/wizardly-stonebraker-qnh3t

Answer 3

Answer №2

If you want to customize the styles of the AccordionSummary component in Material UI, you can easily do so by overriding existing CSS rules. The Accordion Summary provides 6 specific CSS rules that you can override: root, expanded, focused, disabled, content, and expandIcon. These rules are detailed in the CSS section of the AccordionSummary API page on Material UI's official documentation.

Each CSS rule corresponds to a Material UI class for the respective component. For example, the root rule for the AccordionSummary component corresponds to the class .MuiAccordionSummary-root. To override these styles, you can use the method of overriding styles with classes.

Here is an example utilizing this method:

Create a custom class and define the styling using makeStyles. In this case, we will create a class called summaryExpanded with the styling minHeight: '64px'.

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  summaryExpanded: {
    minHeight: '64px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

Apply the custom style to the AccordionSummary component by assigning your custom class to the relevant rule name. In this case, we want to override the Mui-expanded class in the AccordionSummary component with our summaryExpanded class.

const classes = useStyles();

<Accordion>
  <AccordionSummary
    classes: {{
      expanded: classes.summaryExpanded,
    }}
  >
  </AccordionSummary>
  <AccordionDetail>
  </AccordionDetail>
</Accordion>

Answer 4

If you want to customize the styles of the AccordionSummary component in Material UI, you can easily do so by overriding existing CSS rules. The Accordion Summary provides 6 specific CSS rules that you can override: root, expanded, focused, disabled, content, and expandIcon. These rules are detailed in the CSS section of the AccordionSummary API page on Material UI's official documentation.

Each CSS rule corresponds to a Material UI class for the respective component. For example, the root rule for the AccordionSummary component corresponds to the class .MuiAccordionSummary-root. To override these styles, you can use the method of overriding styles with classes.

Here is an example utilizing this method:

Create a custom class and define the styling using makeStyles. In this case, we will create a class called summaryExpanded with the styling minHeight: '64px'.

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  summaryExpanded: {
    minHeight: '64px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

Apply the custom style to the AccordionSummary component by assigning your custom class to the relevant rule name. In this case, we want to override the Mui-expanded class in the AccordionSummary component with our summaryExpanded class.

const classes = useStyles();

<Accordion>
  <AccordionSummary
    classes: {{
      expanded: classes.summaryExpanded,
    }}
  >
  </AccordionSummary>
  <AccordionDetail>
  </AccordionDetail>
</Accordion>

Answer 5

Answer №3

If you're looking to customize styles, try experimenting with overriding properties.

import { Overrides } from "@material-ui/core/styles/overrides";

const customizedStyles: Overrides = {
  MuiExpansionPanelSummary: {
    root: {
      minHeight: "3rem",
      "&$expanded": {
        minHeight: "3rem",
      },
    },
    content: {
      margin: "0.3rem",
      "&$expanded": {
        margin: "0.3rem",
      },
    },
    expandIcon: {
      padding: "0.4rem",
    },
    expanded: {},
  },
};

Answer 6

If you're looking to customize styles, try experimenting with overriding properties.

import { Overrides } from "@material-ui/core/styles/overrides";

const customizedStyles: Overrides = {
  MuiExpansionPanelSummary: {
    root: {
      minHeight: "3rem",
      "&$expanded": {
        minHeight: "3rem",
      },
    },
    content: {
      margin: "0.3rem",
      "&$expanded": {
        margin: "0.3rem",
      },
    },
    expandIcon: {
      padding: "0.4rem",
    },
    expanded: {},
  },
};

Customizing existing Mui classes through the use of makeStyles

Answer №1

Answer №2

Answer №3

Similar questions

Can I apply MUI's touch ripple effect to a div element?

Here is a simple guide on how to create a button that

Customize the CloseIconButton in Material-UI Autocomplete for a unique touch

What is the solution for the error message "Unhandled Runtime Error" with the description "TypeError: videoRef.current.play is not a function"?

How to create a self-contained div in VueJS using Tailwind CSS without affecting other elements

CSS following a clicked event

LeafletJS and ReactJS integration causing misalignment in tile ordering

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div

React's useState feature is doubling the increment

Tips for aligning a div containing an image in the center of another div

Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Issue with dynamically adjusting flex box width using JavaScript

Comparison between a reusable React hook and a convoluted JavaScript response organization

Covering a secret link with a backdrop image

Ways to include the Active class in a React sidebar

Properties undefined

Guide to triggering a change event on a react-number-format component

Can someone please tell me the specific HTML entity that Flickr uses for the arrow icons in the action menu?

Issue with Axios fetching data with parameter in Next.js not resolving

How can recursive data be displayed in a template?