使用JSS通过父项定制子组件的样式

问题描述

我目前正在开发一个项目，该项目的所有样式都在JSS中声明。许多文章和库文档中强调的“好处”之一就是它封装了样式。但是，我确实很难定制它们，尤其是在涉及依赖于组件周围环境的样式（按上下文，我的意思是父元素，同级元素等）时。

请考虑通过FieldDescriptor HOC沿着名为withStyles的组件导出的以下样式：

info: {
fontFamily: theme.typography.fontFamily.light,fontSize: "12px",padding: "0 24px 8px 24px",letterSpacing: 0.3,

}，

在具有该类的元素上，该类将作为FieldDescriptor-info-xxx找到。现在假设该组件是另一个试图定位error类的组件的子组件。您可以使用[class*=FieldDescriptor-error]之类的东西来定位该类（个人，我个人已经认为这是一种非常不干净的方法），它只能在开发环境中有效。

在生产中，类将变得唯一（例如jss-xxx），并且上面的选择器将不再有用。我的问题是，在JSS中自定义组件样式的最干净或“正确”的方法是什么？我或者缺少真正明显的东西，或者可能正面临JSS的局限性。

我期待着不需要更多工具或代码膨胀的解决方案，而这些解决方案真的会错过最初采用JSS的目的。

您可以找到同时使用withStyles和useStyles here

的示例

解决方法

尝试将组件想像成黑盒子，故意将实现细节从外界隐藏起来。

使用此模型，仅组件本身负责其表示，因此您需要要求该组件进行某些更改。在React世界中，您通常会通过将道具传递到该组件来做到这一点。

在该组件内部，您可以采取多种方式，根据props（由于是静态的而首选）组合预定义的类，或者使用函数规则/值来访问props并定义每个组件实例的样式。