0

我在 JS (JSS) 中使用带有 Material-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,看起来我需要以不同的潜在颜色“预构建”整个按钮样式:

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 元素注入一个类。

td因此,如果我有一个包含 200 个单元格的表格,我是否应该在我的 DOM 中添加 200 个类(当我只能使用纯 CSS 中的选择器声明一次时)?

有没有办法在父组件和子组件之间使用继承样式?因为有一个肮脏的模式,我已经写了好几次来合并我从父级注入的样式和子级自己编译的样式:

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

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

export default withStyles(styles)(childComponent);
4

1 回答 1

0

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

是的,请参阅函数值。http://cssinjs.org/json-api?v=v9.8.1#function-values

因此,如果我有一个包含 200 个单元格的表格,我是否应该在我的 DOM 中添加 200 个类(当我只能使用纯 CSS 中的 td 选择器声明一次时)?

您可以使用 '& td' 选择器,请参阅 jss-nested 插件,它已经内置。

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

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

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

于 2018-05-28T13:04:06.617 回答