Question

我有一个<Section>组件：

const styles = theme => ({
  section: {
    backgroundColor: theme.colors.primary,
    color: theme.colors.white,

    '& a:not(.button)': {
      color: 'currentColor',
      textDecoration: 'underline',
    },
  },
});

和<Button>组件：

const styles = theme => ({
  button: {
    backgroundColor: theme.colors.light,
    color: theme.colors.dark,
    padding: theme.spacing.default,
  },
});

基本上，我想在<Button>内使用<Section>并且不会覆盖其颜色。

我无法使用& a:not($button)，因为它位于不同的组件中。

Answer 1

我刚测试过的一个可能的解决方案就是将year_one_variable = None添加到!important样式中。感觉很脏......

Answer 2

更好的解决方案是将选择器修改为：a:not([class^="button"])，它将针对JSS生成的类。

Answer 3

不要使用选择器隐式覆盖组件样式。这是一种非常脆弱的方法，因为它破坏了封装，在某些时候它会打破你的风格。

您应该在按钮组件中使用color: inherit并让父对象始终定义颜色或使用显式覆盖：

接受子项中的类名，在父项中定义带有颜色的css规则。（静电时很好）
使用主题（静态和预定义时很好）
使用函数值和道具http://cssinjs.org/json-api#function-values（如果高度动态，则很好）

使用：不跨组件的伪类

3 个答案: