Javascript 如何在材质UI“ExpansionPanel”中从“CreateMuiteme”提取属性？

我使用的是MaterialUI，我有一个组件是他们的。我还使用

createMuiTheme

创建了一个默认主题，我希望大部分样式都来自于此。我想将扩展面板的颜色设置为灰色，正如在

createMuiTheme

中定义的那样，但是在扩展面板中使用MUI

className

或

style

都没有成功。这是我小组的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const styles = theme => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
  backgroundColor: theme.palette.secondary.grey
});

function SimpleExpansionPanel(props) {
  const { classes } = props;
  console.log(`theme.palette.secondary.grey=${classes.backgroundColor}`);
  return (
    <div className={classes.root}>
      <ExpansionPanel className={classes.backgroundColor}
                      style={{ backgroundColor: classes.backgroundColor }}>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
          <Typography className={classes.heading}>More Info</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}

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

export default withStyles(styles, { withTheme: true })(SimpleExpansionPanel);

最后，我使用MUI上下文来提供主题：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import App from './App';
import MaterialBlueTheme from './components/layout/MaterialBlueTheme.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<MuiThemeProvider theme={MaterialBlueTheme}>
  <App />
</MuiThemeProvider>, document.getElementById('root'));
serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“@material ui/core/styles/MuiThemeProvider”导入MuiThemeProvider；
从“./App”导入应用程序；
从“./components/layout/MaterialBlueTheme.js”导入MaterialBlueTheme；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render(
，document.getElementById（'root'）；
serviceWorker.unregister（）；

---

如何真正使用我想要的

createMuiTheme

颜色？

样式对象中的每个键都是css类名。每个值都必须是有效的CSS属性对象。因此：

const styles = theme => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
  // should use a better name for this class i.e. use a semantic name
  backgroundColor: {
    backgroundColor: theme.palette.secondary.grey,
  }
});

---

styles对象中的每个键都是css类名。每个值都必须是有效的CSS属性对象。因此：

const styles = theme => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
  // should use a better name for this class i.e. use a semantic name
  backgroundColor: {
    backgroundColor: theme.palette.secondary.grey,
  }
});