样式化组件中的通用选择器答案

【问题标题】：Universal selector in Styled Components样式化组件中的通用选择器
【发布时间】：2021-03-14 22:44:02
【问题描述】：

我正在尝试从 sass 转换为 SC，但我似乎找不到可以用来替换通用选择器 (*) 的内容。给我带来麻烦的特定代码块：

*, *::after, *::before{
    box-sizing: border-box;
}

我从阅读文档和类似问题中收集到，我应该用 :last-child 和 :first-child 替换 ::after 和 ::before 但我会替换那个元素选择器吗？非常感谢任何帮助！

【问题讨论】：

你想在哪里使用这个选择器？我们在我们的应用程序中使用这个选择器没有问题。什么是“麻烦”？
@DrewReese 对不起，我会澄清的！我正在使用样式化组件，并询问我将如何将通用选择器初始化为组件，而不是在常规 CSS 中如何完成
CSS 选择器不是组件。 Styled-components 允许您使用标准 CSS 选择器进行编写，因此 * 的工作方式相同。我还在问什么问题。也许您应该包含一个Minimal, Complete, and Reproducible 代码示例以提供更多上下文。

标签： reactjs sass styled-components

【解决方案1】：

import { createGlobalStyle } from 'styled-components';
export const UniversalStyle = createGlobalStyle`
*,*::after, *::before{
box-sizing: border-box;
}`;

现在，在您的 App.jsx 中导入“UniversalStyle”。

import { UniversalStyle } from './AppStyle';
function App() {
return (
    <div>
        <UniversalStyle />
    </div>
)
}

【讨论】：

【解决方案2】：

在使用样式组件时，与号 (&) 是您最好的朋友。这是 styled-component 文档所说的：

伪元素、伪选择器和嵌套我们使用的预处理器 stylis 支持类似 scss 的语法来自动嵌套样式。

与号 (&) 可用于引用主要组件。以下是其潜在用途的更多示例：

const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  color: blue;

  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`

render(
  <React.Fragment>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">The sun is shining...</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </React.Fragment>
)

如果你把选择器放在没有和号的地方，它们将引用组件的子组件。

const Thing = styled.div`
  color: blue;

  .something {
    border: 1px solid; // an element labeled ".something" inside <Thing>
    display: block;
  }
`

render(
  <Thing>
    <label htmlFor="foo-button" className="something">Mystery button</label>
    <button id="foo-button">What do I do?</button>
  </Thing>
)

最后，和号可以用来增加组件上规则的特异性；如果您正在处理可能存在样式冲突的混合样式组件和原始 CSS 环境，这可能会很有用：

const Thing = styled.div`
  && {
    color: blue;
  }
`

const GlobalStyle = createGlobalStyle`
  div${Thing} {
    color: red;
  }
`

render(
  <React.Fragment>
    <GlobalStyle />
    <Thing>
      I'm blue, da ba dee da ba daa
    </Thing>
  </React.Fragment>
)

styled-components: Basics

【讨论】：

您好，感谢您抽出宝贵时间回复，这很有帮助！