1

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

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

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

4

3 回答 3

0

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

于 2018-05-27T08:57:15.877 回答
0

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

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

这是一个名为 的响应式导航抽屉内的导航链接的表示NavDrawer。使用此设置，ListItem生成的 - 在活动时<a />接收类名。activeLink

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

于 2019-02-20T01:02:13.127 回答
0

在继续努力之后，似乎答案是“事情不同”，所以在 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)
于 2018-10-16T16:46:46.723 回答