无法在组件之间使用相同的类名 CSS不在样式组件内部

如何解决无法在组件之间使用相同的类名 CSS不在样式组件内部

我遇到的问题似乎无法达到JS中CSS的目的。我正在使用样式组件。当我尝试使用在样式化组件内部的反应树中某处使用的类名时。上层组件的类名样式以某种方式应用于我（非常）在树上使用的类名。

复制步骤

在反应项目中的任何地方渲染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>
  );
};

预期行为

title中的

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

实际行为

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

这是预期的行为还是我缺少一些基本知识（最佳做法）？

解决方法

如果要强制进行范围界定，可以通过创建TitleStyle并删除类名称和/或让“样式化的组件”为它们命名（生成随机的哈希类名称）并附加到标题div（类名称“ title”）可以删除）。只有这样，该范围才适用于该标题。是吗？

另一种选择

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

Future

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

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

for i,future in enumerate(futures):
    try:
        new_records = future.result(timeout=TIMEOUT)
        with open('Desktop/Data Scrap.csv','w' if i == 0 else 'a',newline='') as csvfile:
            csvwriter = csv.writer(csvfile,delimiter=',')
            if i == 0:
                csvwriter.writerow(['item_name','price_Final','Final_bullet','prod_desc','Image_link','Stock','Prod_spec ','Quantity_avail','Prod_spec','Brand_info','Add_info','Delivered_by','BTG'])
            for record in new_records:
                csvwriter.writerow(record)
    except TimeoutError:
        print('TimeoutError: this thread may be permanently hung.')

＆是SCSS运算符，可与带样式的组件配合使用。 CSS更好地表现为这种方式，因为将CSS规则向下传递会更有效。以这种效率工作！您想创建站点范围内的CSS模式，除非您确定需要这样做（不要太普遍），否则请避免使用特定的目标。

我要做的是，为react组件创建一个样式化的组件，以便每个react组件一个组件来处理该react组件中的所有css / scss。

丹尼尔

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

最后，样式化组件只会为您制作的每个样式化组件生成一个唯一的类名。因此CSS规则仍然可以在这里使用。

您可以

您只能选择直接后代.title。

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

将类名更改为更具体的名称。
在父级上嵌套CSS规则。所以代替这个，

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

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

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