首页 文章

JSS审讯

提问于
浏览 次
0

我在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，看起来我需要以不同的潜在颜色“预构建”整个按钮样式：

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);
material-ui jss

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/

    回复于

相关问题