Question

我们有一个样式化的组件，它在编译时会添加这样的类名：

<div class="app">
    <a class="css-hash">link</a>
</div>

这一切都很好，除了有人声明类似于以下内容的CSS的实例之外：

.app a { color: red }

.css哈希如果具有颜色规则，将不再被拾取。如果我们能够以“ a.css-hash”之类的方式创建CSS，则可以解决此问题。在这种情况下，我们作为情感.css哈希的一部分所拥有的任何内容都将应用于在页面其他地方声明的其他样式。

我们可能无法正确处理此问题。我尝试在各个地方寻找解决方案，但是没有运气。

Answer 1

您可以多次使用&选择器以提高特异性：

import { css } from '@emotion/css'

const myClassName = css({
  // Using `&` twice to increase specificity
  '&&': {
    backgroundColor: 'red'
  }
})

const MyComponent = () => {
  return <div className={myClassName}>hello</div>
}

&只会复制您的类名，因此，如果您的类名是.css-hash，则&&将变成.css-hash.css-hash。您可以使用更多&来进一步提高特异性。

请参阅Sass Ampersand文档。

有没有一种方法可以通过在Emotion中添加元素来提高特异性？

1 个答案: