javascript - 有没有办法通过添加带有情感的元素来增加特异性？

Question

我们有一个样式化的组件，当它编译时它会添加一个类名，如下所示:

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

这一切都很好，除了有人声明类似于以下的 CSS 的情况:

.app a { color: red }

如果 .css-hash 具有颜色规则，则不再拾取它。如果我们能够以“a.css-hash”之类的方式创建 CSS，则可以解决此问题。在这种情况下，我们作为情感的 .css-hash 的一部分所拥有的任何内容都将应用于页面中其他地方声明的其他样式。
我们可能会错误地处理这个问题。我尝试在各个地方寻找解决方案，但没有运气。

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文档。