问题描述
我遇到的问题似乎无法达到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...
}
}
`