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

【问题标题】：Reference global component class in local JSS style?以本地 JSS 样式引用全局组件类？
【发布时间】：2018-11-05 18:01:44
【问题描述】：

我正在使用带有 react 的 material-ui，并且当它出现在本地类中时，我想要为标准的 material-ui 组件设置样式。从概念上讲，类似于：

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

我在 JSS 中看到如何使用 $ 表示法引用本地类，以及如何使用 createTheme 覆盖/增强 material-ui 样式，但我一直无法找到有关如何完成此用例的任何信息。

【问题讨论】：

到目前为止，我已经能够根据具体情况找到感觉像是解决方法的方法，但我也越来越意识到 JSS 也有不同的基本风格.我的看法是，它与其说是“用 JS 完成的 CSS”（这是我心目中的模型），不如说是“一种可编译成 CSS 的替代样式框架”。因此，每种方法都有一些更好的地方，而其他地方它们只是不同。
我遇到了同样的问题。我知道这已经有一段时间了，但我想知道您现在是否找到任何方法来做到这一点。
不完全是。样式模型只是不同，而 CSS+HTML 的这个非常受欢迎的特性似乎不可用。你可以解决一些相同的问题，但你必须以不同的方式来解决它。我已经发布了答案；让我知道它是否解决了您的情况。

标签： material-ui jss

【解决方案1】：

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

【讨论】：

我知道，但这并不能真正回答这个问题。除非您说不支持此用例，或者该用例以不明显的方式符合这四种方式之一。此外，这个问题的明确意图是如何将一般的 CSS 上下文选择应用于这种情况，而且，文档似乎也没有解决这个问题。

【解决方案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)

【讨论】：

【解决方案3】：

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

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

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

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

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 文档中响应式导航抽屉的复制粘贴。

【讨论】：