不能跨组件使用相同的类名。 CSS 不在样式组件内

Question

我遇到的问题似乎违背了 CSS 在 JS 中的目的。我正在使用样式组件。当我尝试使用在样式组件内的反应树中某处使用的类名时。上面的组件类名样式不知何故被应用到我在树下（非常）使用的类名。

重现步骤

在 React 项目中的任何位置渲染 UpperComponent。

const StyledContainer = styled.div`
  .title {
    color: red;
    margin-bottom: 32px;
  }
`;

const UpperComponent = () => {
  return (
    <StyledContainer>
      <FirstComponent />
      <h4 className="title"> text inside upper component </h4>
    </StyledContainer>
  );
};


const FirstStyledContainer = styled.div``;

const FirstComponent = () => {
  return (
    <FirstStyledContainer>
      <h4 className="title">text inside first component</h4>
      <SecondComponent />
    </FirstStyledContainer>
  );
};

const SecondComponent = () => {
  return (
    <div>
      <h4 className="title">text inside second component</h4>
      <ThirdComponent />
    </div>
  );
};

const ThirdComponent = () => {
  return (
    <div>
      <h4 className="title">text inside second component </h4>
    </div>
  );
};

预期行为

UpperComponent 中的title 类名不应影响其具有相同类名的后代元素。它的范围应该仅限于 <h4 className="title"> text inside upper component </h4>

实际行为

.title { color: red; margin-bottom: 32px; } 类样式应用于 UpperComponent 中的所有组件。 title 不知何故归结为 ThirdCompoent，它嵌套在两个组件中。

这是预期的行为还是我错过了一些基本的东西（最佳实践）？

Answer 1

如果你想强制规定范围 - 你可以删除类名和/或让“样式化组件”通过创建 TitleStyle 来命名它们（生成随机哈希类名）并附加到标题 div（类名“title”可以删除）。这应该仅适用于该标题。对吧？

另一种选择

是的，FirstComponent 和 SecondComponent（等）将从顶部捕获 css 规则。这对我来说是预期的结果。不像我们在下面这样做！

<div style = {{color:"red"}}>Test</div>

这只会将 css 内联应用于该 div。

我会像这样稍微更改标题类的名称

const StyledContainer = styled.div`
  .title {
    color: red;
    margin-bottom: 32px;
    &.secondary { color: pink; }
    &.thirdly { color: yellow; }
  }
`;

const UpperComponent = () => {
  return (
    <StyledContainer>
      <FirstComponent />
      <h4 className="title"> text inside upper component </h4>
    </StyledContainer>
  );
};

const SecondComponent = () => {
  return (
    <div>
      <h4 className="title secondary">text inside second component</h4>
      <ThirdComponent />
    </div>
  );
};

const ThirdComponent = () => {
  return (
    <div>
      <h4 className="title thirdly">text inside second component </h4>
    </div>
  );
};

& 是一个 SCSS 运算符，适用于样式化组件。 CSS 以这种方式表现更有益，因为向下传递 css 规则更有效。以这种效率工作！如果您想创建网站范围的 CSS 模式，请尽量避免特定定位，除非您确定需要（这应该不太常见）。

我最常做的是，为 react 组件创建了一个样式化的组件，因此每个 react 组件都有一个来处理该 react 组件中的所有 css/scss。

丹尼尔

Answer 2

这是正常工作的。您正在选择该样式组件中的所有 .titles。

最后，样式组件只会为您创建的每个样式组件生成一个唯一的类名。所以 CSS 的规则在那里仍然有效。

你可以

1. 您只能选择直系后代.title。

    const StyledContainer = styled.div`
     >.title {
      // rules...
     }
    `

1. 将类名更改为更具体的名称。

2. 将 CSS 规则嵌套在父级上。所以不是这个，

    const StyledContainer = styled.div`
     .title {
      // rules...
     }
    `

用另一个元素包裹你的 h4 并执行此操作

    const StyledContainer = styled.div`
      .wrapperClassName {
         .title {
          // rules...
         }
      }
    `