Css 是否可以使用组件内部的Styles（）将函数传递到Material UI中

我正在尝试将dahsboard的组件拆分为更小的组件。但是，所有组件都取决于抽屉宽度。我的第一个想法是将抽屉宽度移动到状态中，这样我就可以将其传递到每个组件中。但是，变量样式取决于抽屉宽度。当学习材料ui文档和参考项目时，样式总是在类之外

我尝试在类内移动这两个变量，并通过类的引用将函数传递给withStyle，但也失败了。页面的css关闭了，我收到了一条警告，说我向withStyles传递了一个无效函数。它看起来像下面

export default withStyles(DashboardLayout.styles)(DashboardLayout);

下面是代码最初的样子

import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import Badge from '@material-ui/core/Badge';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { mainListItems, secondaryListItems } from './listItems';

const drawerWidth = 240;

const styles = theme => ({
  root: {
    display: 'flex',
  },
  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  toolbarIcon: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginLeft: 12,
    marginRight: 36,
  },
  menuButtonHidden: {
    display: 'none',
  },
  title: {
    flexGrow: 1,
  },
  drawerPaper: {
    position: 'relative',
    whiteSpace: 'nowrap',
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerPaperClose: {
    overflowX: 'hidden',
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    width: theme.spacing.unit * 7,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing.unit * 9,
    },
  },
  appBarSpacer: theme.mixins.toolbar,
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
    height: '100vh',
    overflow: 'auto',
  },
  chartContainer: {
    marginLeft: -22,
  },
  tableContainer: {
    height: 320,
  },
  h5: {
    marginBottom: theme.spacing.unit * 2,
  },
});

class DashboardLayout extends React.Component {
  state = {
    open: true,
  };

  handleDrawerToggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { classes, children } = this.props;

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="absolute"
          className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
        >
          <Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerToggle}
              className={classNames(
                classes.menuButton,
                this.state.open && classes.menuButtonHidden,
              )}
            >
              <MenuIcon />
            </IconButton>
            <Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              className={classes.title}
            >
              Dashboard
            </Typography>
            <IconButton color="inherit">
              <Badge badgeContent={4} color="secondary">
                <NotificationsIcon />
              </Badge>
            </IconButton>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          classes={{
            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
          }}
          open={this.state.open}
        >
          <div className={classes.toolbarIcon}>
            <IconButton onClick={this.handleDrawerToggle}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>{mainListItems}</List>
          <Divider />
        </Drawer>
        <main className={classes.content}>
          { this.props.children }
          <div> Children </div>
        </main>
      </div>
    );
  }
}

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

export default withStyles(styles)(DashboardLayout);

从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/Badge”导入徽章；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/图标/通知”导入通知图标；
从“/listItems”导入{mainListItems，secondaryListItems}；
常数抽屉宽度=240；
常量样式=主题=>({
根目录：{
显示：“flex”，
},
工具栏：{
paddingRight:24，//抽屉关闭时保持右侧填充
},
工具栏图标：{
显示：“flex”，
对齐项目：“居中”，
justifyContent:“柔性端”，
填充：“0 8px”，
…theme.mixins.toolbar，
},
appBar：{
zIndex:theme.zIndex.drawer+1，
transition:theme.transitions.create（['width'，'margin']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
},
appBarShift：{
页边左侧：抽屉宽度，
宽度：`calc（100%-${drawerWidth}px）`，
transition:theme.transitions.create（['width'，'margin']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.enteringScreen，
}),
},
菜单按钮：{
marginLeft:12，
marginRight:36，
},
菜单按钮隐藏：{
显示：“无”，
},
标题：{
flexGrow:1，
},
抽屉纸：{
位置：'相对'，
空白：“nowrap”，
宽度：抽屉宽度，
transition:theme.transitions.create（'width'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.enteringScreen，
}),
},
抽屉纸关闭：{
溢出x:'隐藏'，
transition:theme.transitions.create（'width'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
宽度：theme.spacing.unit*7，
[theme.breakpoints.up（'sm'）：{
宽度：theme.spacing.unit*9，
},
},
appBarSpacer:theme.mixins.toolbar，
内容：{
flexGrow:1，
填充：theme.space.unit*3，
高度：“100vh”，
溢出：“自动”，
},
图表容器：{
边缘左：-22，
},
桌面容器：{
身高：320，
},
h5：{
marginBottom:theme.spacing.unit*2，
},
});
类DashboardLayout扩展了React.Component{
状态={
开放：是的，
};
handleDrawerToggle=（）=>{
this.setState（{open:！this.state.open}）；
};
render（）{
const{classes，children}=this.props；
返回(

我想将抽屉、appbar移动到它们自己的文件中，而不必硬编码每个文件中的抽屉宽度和样式。
您可以将
抽屉宽度
放在自定义主题中，以便较小的组件可以从
主题访问它。抽屉宽度
。官方组件将使用（即
调色板
），但您始终可以为自己的组件添加更多键

例如，使用
createMuiTheme
创建主题，并将其作为道具传递给
MuiThemeProvider
：

const theme = createMuiTheme({
  drawerWidth: 200 // a custom key in theme object
});

function Root() {
  return (
    <MuiThemeProvider theme={theme}>
      <App/>
    </MuiThemeProvider>
  );
}

下面是沙盒中的一个示例：

// your appbar's own style
const styles = theme => ({ 
  appBar: {
    width: `calc(100% - ${theme.drawerWidth}px)`,
    marginLeft: theme.drawerWidth
  }
})
export default withStyles(styles)(YourAppBar);

// your drawer's own style
const styles = theme => ({  
  drawer: {
    width: theme.drawerWidth,
    flexShrink: 0
  },
  drawerPaper: {
    width: theme.drawerWidth
  }
})
export default withStyles(styles)(YourDrawer);