Question

我正在使用material-ui with react，而我想要做的就是在一个标准的material-ui组件出现在本地类中时。从概念上讲，类似于：

const styles = {
  localClass: {
    '& MuiGrid-item': {
      backgroundColor: 'red'
    }
  }
}

我在JSS中看到如何使用$表示法引用本地类，以及如何使用createTheme覆盖/扩充material-ui样式，但我无法找到有关如何完成的任何内容这个用例。

Answer 1

您有4种方法可以自定义MUI样式https://material-ui.com/customization/overrides/

Answer 2

在继续进行此工作之后，答案似乎是“事情各不相同”，因此CSS + HTML中优雅的样式在CSS + JS中可能笨拙或完全不可能。在我看来，CSS + JS模型在某些情况下已经把婴儿扔掉了，但是现在就是这种情况。

仍然，在许多情况下，您想通过上下文使用修改组件样式（=〜存在父组件或封装样式类）可以通过其他方式合理地实现，但这在某种程度上取决于特定的用例

如果目标是更改特定组件的行为，则只需将组件直接包装在新类中即可。例如：

const style = { root: { backgroundColor: 'red' } } 

StyledWidget = withStyle(style, 'StyledWidget')(
  () => <Widget classes={{ root: classes.root }} />

在要使某些内容可重用的地方（至少在代码级别上），请创建一个接受渲染组件的样式小部件，或者创建一个注入样式类的高阶组件。例如：

<WidgetStyler component={TextInput} ... />
<WidgetStyler component={Buttton} />

或

StyledWidget = withWidgetStyling(TextInput)

Answer 3

可能不是正确的答案，但我一直在寻找一个非常相似的问题的答案，希望我能激发一些想法。就我而言，我具有以下组件层次结构

    <ListItem
      className={classes.navLink}
      component={Link}
      activeClassName="active"
      to={`/graphiql`}
      button
    >
      <ListItemText
        classes={{ primary: "navLink-text" }}
        primary="GraphiQL"
      />
    </ListItem>

这是响应式导航抽屉中名为NavDrawer的导航链接的表示。通过此设置，当ListItem处于活动状态时，<a />（生成的active）将收到类名Link。

NavDrawer可以接收包含类似导航链接的navItems道具。因此，为了全局定位和设置这些active导航链接的样式，我将以下内容添加到了 NavDrawer withStyles中：

const styles = theme => ({
  "@global": {
    ".active .navLink-text": {
      color: theme.palette.primary.main,
      fontWeight: 500,
      letterSpacing: "0.1em"
    }
  },
  root: {
    display: "flex"
  },
  // other rules here
}

因此，无论导航链接来自何处，当它们在NavDrawer中呈现时，它们都会获得相应的活动样式。

NavDrawer的代码基本上是Material UI文档中响应式导航抽屉的复制粘贴。

以本地JSS样式引用全局组件类？

3 个答案: