以本地 JSS 样式引用全局组件 class?

Reference global component class in local JSS style?

我将 material-ui 与 React 一起使用,我想做的是在标准 material-ui 组件出现在本地时为其设置样式class。从概念上讲,类似于:

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

我在 JSS 中看到如何使用 $ 符号引用本地 classes,以及如何使用 override/augment material-ui 样式 createTheme,但我一直无法找到有关如何完成此用例的任何信息。

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

继续研究后,似乎答案是"things work different",所以在CSS+HTML中优雅的样式可能会很尴尬或彻头彻尾在 CSS+JS 中是不可能的。在我看来,CSS+JS 模型在某些情况下确实把婴儿和洗澡水一起扔掉了,但目前就是这样。

尽管如此,在许多情况下,如果您想使用基于上下文修改组件样式(=~ 父组件或封闭样式 classes 的存在)可以通过其他方式合理地完成,但这取决于关于特定用例的一些信息。

如果目标是更改特定组件的行为,只需将组件直接包装在新的 class 中。例如:

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

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

如果您想使某些东西可重用(至少在代码级别),请创建一个接受渲染组件的样式小部件,或者创建一个注入样式的高阶组件 classes。例如:

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

StyledWidget = withWidgetStyling(TextInput)

可能不是正确的答案,但我正在寻找一个非常相似的问题的答案,我希望我的答案能激发一些想法。在我的例子中,我有以下组件层次结构

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

这是名为 NavDrawer 的响应式导航抽屉内导航 link 的表示。使用此设置,ListItem - 生成的 <a /> - 在 Link 处于活动状态时接收类名 active

NavDrawer 可以接收包含类似导航 link 的 navItems 道具。因此,为了在全球范围内定位和设置这些 active 导航 link 的样式,我将以下内容添加到 </code>NavDrawer<code>withStyles `:

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

有了这个,无论导航 links 来自哪里,它们在 NavDrawer.

内呈现时都会获得相应的活动样式

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