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