用 jss 重新绘制样式

Question

您好，我正在尝试在 react 项目中使用带有 recharts 的 material-ui。

我正在尝试将以下 css 翻译成 jss。

.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child {
    stroke-opacity: 0
}

我的尝试：

import createStyles from "@material-ui/core/styles/createStyles";

export const styles = () =>
  createStyles({
    root: {
      'recharts-wrapper': {
        'recharts-cartesian-grid-horizontal': {
          'line': {
            '&:last-child': {
              'stroke-opacity': 0
            }
          }
        }
      }
    }
  }
);

这没有效果。我确实看到recharts-wrapper 和recharts-cartesian-grid-horizontal 之间有一个名为recharts-cartesian-grid 的元素，但我不确定它是否重要。我尝试将类重命名为驼峰式大小写都没有成功作为字符串或不作为字符串。

Answer 1

没有效果，因为 Recharts 通过比您的样式定义具有更高优先级的样式属性设置笔画不透明度。要覆盖您需要添加!important 或设置display: none 而不是不透明度。