Html 不能'；不要在组件之间使用相同的类名。CSS未在样式组件内确定范围

我遇到的问题似乎与JS中CSS的目的背道而驰。我正在使用样式化的组件。当我试图使用一个类名时，这个类名在一个样式化组件的react树中的某个地方被使用。上面的组件类名样式以某种方式应用于我在树下使用的类名

复制步骤 在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>
  );
};

const StyledContainer=styled.div`
.头衔{
颜色：红色；
边缘底部：32px；
}
`;
常量上限组件=（）=>{
返回(
上部组件内的文本
);
};
const FirstStyledContainer=styled.div``；
常量FirstComponent=（）=>{
返回(
第一个组件内的文本
);
};
const SecondComponent=（）=>{
返回(
第二个组件内的文本
);
};
常量ThirdComponent=（）=>{
返回(
第二个组件内的文本
);
};

预期行为

UpperComponent

中的

title

classname不应影响其具有相同类名的子体元素。其范围应仅限于上部组件内的

文本

实际行为

.title{color:red；margin bottom:32px；}

类样式应用于UpperComponent中的所有组件<代码>标题以某种方式将其归结为嵌套在两个组件中的第三个组件

---

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

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

另一种选择

是的，第一个组件和第二个组件（etc）将从顶部捕获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>
  );
};

const StyledContainer=styled.div`
.头衔{
颜色：红色；
边缘底部：32px；
&.secondary{颜色：粉红色；}
&.第三{颜色：黄色；}
}
`;
常量上限组件=（）=>{
返回(
上部组件内的文本
);
};
const SecondComponent=（）=>{
返回(
第二个组件内的文本
);
};
常量ThirdComponent=（）=>{
返回(
第二个组件内的文本
);
};

&是一个SCSS操作符，可以很好地处理样式化组件。 CSS以这种方式工作更有益，因为向下传递CSS规则更有效。以这种效率工作！如果您想创建站点范围的CSS模式，请尝试避免特定的目标，除非您确定它是必需的（这应该不太常见）

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

---

Daniel

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

另一种选择

是的，第一个组件和第二个组件（etc）将从顶部捕获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>
  );
};

const StyledContainer=styled.div`
.头衔{
颜色：红色；
边缘底部：32px；
&.secondary{颜色：粉红色；}
&.第三{颜色：黄色；}
}
`;
常量上限组件=（）=>{
返回(
上部组件内的文本
);
};
const SecondComponent=（）=>{
返回(
第二个组件内的文本
);
};
常量ThirdComponent=（）=>{
返回(
第二个组件内的文本
);
};

&是一个SCSS操作符，可以很好地处理样式化组件。 CSS以这种方式工作更有益，因为向下传递CSS规则更有效。以这种效率工作！如果您想创建站点范围的CSS模式，请尝试避免特定的目标，除非您确定它是必需的（这应该不太常见）

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

---

丹尼尔

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

.title

s

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

你可以

您只能选择直系后代

.title

将类名更改为更具体的名称

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

用另一个元素包裹h4，然后执行此操作

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

---

这是工作，因为它应该。您正在选择该样式化组件中的所有

.title

s

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

你可以

您只能选择直系后代

.title

将类名更改为更具体的名称

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

用另一个元素包裹h4，然后执行此操作

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

---

这是预期的行为。。。与样式化组件无关，实际上是JS中的CSS