Question

我在JS（JSS）中使用带有材料-ui的CSS，它工作正常，但我没有得到它应该提供的功能（不仅仅是样式注入）在功能/编码方面设备。我觉得我错过了一些东西，所以我有一些具体的问题。

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

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

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

使用JSS，看起来我需要＆＃34;预构建＆＃34;整个按钮样式有不同的潜在颜色：

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个类（当我只能在纯CSS中使用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选择器声明它一次时）？

你可以使用＆＃39;＆amp; TD＆＃39;选择器，请参阅jss-nested插件，它已经内置。

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

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

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

JSS讯问

1 个答案: