同时使用样式组件和css模块是一种做法吗?

Question

我最近深入研究了样式组件，我想知道在哪里实际使用它们。在我的例子中，10%的组件是样式组件，其余90%使用CSS模块。这是一种正常的做法，还是我不应该在我的项目中混合使用这两种样式?使用CSS模块和样式的单个组件是正常的吗?

Answer 1

从未见过两种方法混合使用，但这并没有错。这可能是一个不好的做法，你为同一件事创建了两个模式，这可能会令人困惑。

个人观点:我现在正在做两个项目，一个使用有样式的组件，另一个使用css模块。样式组件有时是有问题的，因为如果不能正确使用它们，就会破坏名称空间，不仅如此，还可能弄乱HTML标记。我只使用样式组件来编写页面框，其余的都是使用css类编写的

export const Container = styled.div`
padding: 0 1em;
margin: 0 auto;
column-count: 1;
column-gap: 2em;
background: ${COLOR.lightestGray};
.column-item {
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
@media (min-width: ${BREAKPOINTS.mobileMedium}) {
padding: 0em 2.94em;
}
@media (min-width: ${BREAKPOINTS.desktopMedium}) {
padding: 2em 2.94em;
}
@media (min-width: ${BREAKPOINTS.desktopLarge}) {
column-count: 2;
}
`;

使用Css模块的命名空间是安全的，但你使你的组件更混乱，像这样:

<form className={styles.form}>
<input className={cn({
[styles.input]: true,
})}
{...nameInput}
onChange={e => nameInput.onChange(e)}
// onChange={e => setName(e.target.value)}
type="text"
placeholder="Nome do fornecedor"
/>
<input
className={cn({
[styles.input]: true,
[styles.valid]: validateCNPJ(CNPJ),
[styles.invalid]: CNPJ && !validateCNPJ(CNPJ),
})}
value={CNPJ}
type="text"
placeholder="CNPJ"
onChange={handleCNPJ}
/>

我个人不喜欢混合关注点，所以我只选择有样式的组件，就这样，干杯