JSS询问

Question

我在JS (JSS)中使用CSS和material-ui，它工作得很好，但我不知道它在特性/编码工具方面应该提供什么(除了样式注入)。我觉得我错过了一些东西，所以我有一些具体的问题。

通过样式注入，我可以根据上下文调整样式，例如：

const buttonStyle = {
  border: "2px solid black »,
  borderRadius: "5px",
  padding: "15px",
  font-family: "15px",
  font-size: "2em",
  backbroundColor: "red"
};

if (success) {
  buttonStyle.backgroundColor = "green";
}

使用JSS，看起来我需要用不同的潜在颜色“预先构建”整个按钮样式：

const style = {
  buttonSuccess: {
    border: "2px solid black »,
    borderRadius: "5px",
    padding: "15px",
    font-family: "15px",
    font-size: "2em",
    backbroundColor: « green »
  }, 
  buttonError: {
    border: "2px solid black",
    borderRadius: "5px",
    padding: "15px",
    font-family: "15px",
    font-size: "2em",
    backbroundColor: "red"
  }
};

当只有一个参数是动态的时，有什么方法可以避免重写整个样式吗？

另外一点，使用JSS，看起来我们需要为每个需要样式化的html元素注入一个类。

那么，如果我有一个包含200个单元格的表，我是否应该在DOM中添加200个类(当我只能用纯td选择器声明它一次时)？

有没有办法在父组件和子组件之间使用继承样式？因为有一个脏的模式，我已经写了几次来合并我从父节点注入的样式和子节点自己编译的样式：

const styles = theme => ({
  root: {
    backgroundColor: "blue"
  }
});

const childComponent = (props) => (
  <div classeName={`${props.parentClass} ${props.classes}`} /> // See parentClass here
);

export default withStyles(styles)(childComponent);

Answer 1

当只有一个参数是动态的时，有什么方法可以避免重写整个样式吗？

可以，请参见函数值。http://cssinjs.org/json-api?v=v9.8.1#function-values

那么，如果我有一个包含200个单元格的表，我是否应该在DOM中添加200个类(在纯CSS中，我只能用td选择器声明它一次)？

你可以使用'& td‘选择器，参见jss嵌套插件，它已经内置了。

http://cssinjs.org/jss-nested?v=v6.0.1

有没有办法在父组件和子组件之间使用继承样式？

JSS不修改CSS的继承模型。我认为您正在尝试覆盖由核心定义的属性。查看自定义文档https://material-ui.com/customization/overrides/