将createMuiTheme内定义的样式与Material-UI的useStyles一起使用的正确方法是什么? [英] 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;

上面提供的主题位于组件Component内部.

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

这是使用useTheme和className的正确方法吗?问题是我不能使用通过 createMuiTheme 定义并通过 className 属性中的 ThemeProvider 获取的样式，这意味着有时 classNames 和样式中的样式可能会相互冲突.我找不到在createMuiTheme内提供的样式与className一起使用的示例.

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.

推荐答案

如果您想在 MUI 中重用类，您应该创建一个外部样式文件，然后将该文件导入到您要使用该样式的组件中.试试这个:
在 sharedStyles 中:

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;

在组件中:

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);

这篇关于将createMuiTheme内定义的样式与Material-UI的useStyles一起使用的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！