What is the proper way of using the styling defined inside createMuiTheme alongside with Material-UI's useStyles?

问题

import React from 'react';
import Component from './components/Component';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';;

const theme = createMuiTheme({
  container: {
    width: '100%',
    paddingRight: '15px',
    paddingLeft: '15px',
    marginRight: 'auto',
    marginLeft: 'auto'
  },
  flexColumn: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Component />
      </div>
    </ThemeProvider>
  );
}

export default App;

The theme provided above goes inside the component Component.

import React, { useState } from "react";
import { makeStyles } from '@material-ui/core/styles';
import { useTheme } from '@material-ui/core/styles';
import classNames from 'classnames';


const useStyles = makeStyles(() => ({
    bar: {
        flexGrow: 1,
        padding: '.8rem .8rem',
        lineHeight: '1.5em',
        fontSize: '18px',
    },
    alert: {
        color: 'white',
        backgroundColor: 'red',
    },
}));
export default function Component (props) {
    const theme = useTheme();
    const classes = useStyles();
    const [focus, setFocus] = useState(false);

    return (
        <div>
            <div style={theme.flexColumn} className={classNames(classes.alert, classes.bar)}>
                <div>
                </div>
            </div>
        </div>
    );
}

Is this the proper way to use useTheme and className? The issue with this is that I can't use the styles defined with createMuiTheme and fetched through the ThemeProvider inside the className attribute, which means sometimes the styling inside classNames and style may conflict with one another. I couldn't find an example where the styling provided inside createMuiTheme is used with className.

回答1:

If you want to reuse classes in MUI, you should create an external style file, then import this file into the components that you want to use this style. Try this:
In sharedStyles:

export const layout = {
  header: {
    fontSize: "1.5em",
    color: "blue"
  },
  footer: {
    fontSize: "0.8em"
  }
};

const sharedStyles = theme => ({
  grow: {
    flexGrow: 1
  },
  defaultPadding: {
    padding: theme.spacing.unit * 3 + "px"
  },
  "layout.header": layout.header
});

export default sharedStyles;

In a component:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import sharedStyles, { layout } from "./sharedStyles";
import Typography from "@material-ui/core/Typography";

function Dashboard(props) {
  const { classes } = props;

  return (
    <Paper className={classes.defaultPadding}>
      <Typography variant="body1" gutterBottom>
        Hello <span className={classes.someOtherStyle}>World</span>
      </Typography>
      <Typography
        component="h2"
        variant="h1"
        gutterBottom
        className={classes["layout.header"]}
      >
        Heading
      </Typography>
      <Typography
        component="h2"
        variant="h1"
        gutterBottom
        className={classes.header}
      >
        Heading 2
      </Typography>
    </Paper>
  );
}

const styles = theme => ({
  ...sharedStyles(theme),
  header: layout.header,
  someOtherStyle: {
    color: "red"
  }
});

export default withStyles(styles)(Dashboard);

来源：https://stackoverflow.com/questions/62374323/what-is-the-proper-way-of-using-the-styling-defined-inside-createmuitheme-alongs

标签

reactjs

material-ui