Based on the documentation, I can style the component like this:

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

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',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

Or like this:

import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const styles = {
  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 HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

I've been trying to find a way to edit the style when an event gets triggered. For example, when the user enables dark mode:

const manageDarkModeUpdateWhenUserTogglesIt = () => {
  window.addEventListener("storage", () => {
    // This gets triggered when the user enables dark mode
    // I need to update the style here
  });
};

I need to update the style there. But, I couldn't find a way to do so in both of the approaches mentioned above and anything I try causes some error. Any help?

CodePudding user response：

You can use theming feature of MUI, you can add 2 modes (light & dark) and customize each mode by the style you want, then you can access the style inside makeStyle:

const getTheme = (mode) => {
  return mode === 'light'
    ? //regular style
      {
        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',
        },
      }
    : //dark mode style
      {
        root: {
          //your style
        },
      };
};

App.js

const App = () => {
    //Add state mode here
    const [mode, setMode] = useState("light")
    const theme =  createTheme(getTheme(mode));

    return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

Your component

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles((theme) => ({
    root:theme.root,
  }));

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

Another thing, I think makeStyles is legacy.

CodePudding user response：

I solved this by using the Dynamic styling:

import Tabs from "@material-ui/core/Tabs";
import { styled } from "@material-ui/core/styles";

const CustomTabs = styled(Tabs)({
  flexGrow: 1,
  width: "100%",
  backgroundColor: "var(--background-color)",
});

const darkModeVars = {
  "--background-color": "#16213E",
};

const defaultModeVars = {
  "--background-color": "#ffffff",
};

function TabsComponent(props) {
  const [vars, setVars] = React.useState(
    localStorage.darkMode == "true" ? darkModeVars : defaultModeVars
  );

  useEffect(() => {
    manageDarkModeUpdateWhenUserTogglesIt();
  }, []);

  const manageDarkModeUpdateWhenUserTogglesIt = () => {
    window.addEventListener("storage", () => {
      if (localStorage.darkMode == "true") {
        setVars(darkModeVars);
      } else {
        setVars(defaultModeVars);
      }
    });
  };
  return (
    <div>
      <AppBar position="static" color="default">
        <CustomTabs style={vars}></CustomTabs>
      </AppBar>
    </div>
  );
}

export default withRouter(TabsComponent);