How Override Material UI Style with Hooks

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`
    }
  }
};

Overriding the material-UI style not working

First of all, if you check the DOM structure

<div class="MuiTabs-root Tabs" aria-label="disabled tabs example">
  <div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
    <div class="MuiTabs-flexContainer" role="tablist">
    </div>
  </div>
</div>;

You would find out that the demand className is MuiTabs-flexContainer (rather than tabFlexContainer)

Example: For Tabs, all the className can be found in the MUI Tabs CSS API

---

There are many solutions, except normal withStyles and makeStyles, for fully override:

1.Material-UI solution

1.1 Use MUI internal style HOC withStyles to fully override the component.

Using nesting selector

import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = withStyles({
  root: {
    background: "light-blue",
    ...
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    "& div.MuiTabs-scroller": {
      "& .MuiTabs-flexContainer": {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
      }
    }
  }
})(Tabs);

---

1.2 Use normal createStyles or makeStyles style solution

Classical component

withStyles (High order function) + createStyles

Functional component

useStyles (hooks) + makeStyles

Refer in details: https://stackoverflow.com/a/60736142/11872246

---

2.Styled-Components solution

If you want to use separate CSS files to style MUI component

You can try styled-components

styled-components allows you to write actual CSS code to style your components.

Usage:

import styled from 'styled-components';
import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = styled.Tabs`
  font-size: 1.5em;
  ...
`;

---

3.Separate Pure CSS solution

Refer: css_selectors

import "./styles.css";

div.MuiTabs-flexContainer {
  background: linear-gradient(45deg, red 30%, #ff8e53 90%);
}

How to overwrite specific style in material ui component

Use makeStyles to define the new style for MuiList-Padding, and than use useStyles hook and MuiListProps prop to override that style:

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  padding: {
    paddingTop: "30px",
    paddingBottom: "30px"
  }
}));

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const classes = useStyles();

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        MenuListProps={{
          classes: {padding: classes.padding},
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

You can check that working Code Sandbox link

---

Note: this answer works for material-ui V4

How to override style of Material-UI hidden component?

Here's the relevant code from your sandbox:

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && <Box p={3}>{children}</Box>}
    </Typography>
  );
}

The Box is inside the Typography within the TabPanel (<Box p={3}>{children}</Box>). p={3} means padding of 3 spacing units which are 8px each. You can change this Box as needed.

Material-UI styles overriding my styles cause of ordering

As you may know, f you have two CSS classes applied to the same element with the same degree of specificity, then the winner will be the CSS class that is defined last within the document (based on the order of the elements in the , NOT the order of the class name strings in the class attribute of the element being styled). As: Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh

So, you can change order of imports. Import Button before import style.
Let try with what is different from:

import React from "react";
import {Button} from '@material-ui/core';
import DarkTheme from 'DarkTheme';

and

import React from "react";
import DarkTheme from 'DarkTheme';
import {Button} from '@material-ui/core';

useStyles hook not working in Material-ui

Try:

const useStyles = makeStyles({
  btn: {
    fontSize: "50px !important",
    backgroundColor: "green !important"
  }
});

---

Related Topics