reactjs - 跨组件使用 :not 伪类

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

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

Answer 2

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

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

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

Answer 3

我刚刚测试的一种可能的解决方案是简单地添加!important样式<Button>。感觉很脏...