同时使用样式组件和 css 模块是一种习惯吗？

Question

我最近深入研究了样式化组件，我想知道在哪里实际使用它们。在我的例子中，我的组件中有 10% 是样式化的，另外 90% 使用 CSS 模块。这是正常做法还是我不应该在我的项目中混合使用这两种样式？单个组件使用 CSS 个模块并设置样式是否正常？

Answer 1

从未见过两种方法混合使用，但这并没有错。这可能是一个不好的实践想法，你为同一件事创建了 2 个模式，这可能会造成混淆。

这里的个人观点：我现在正在从事 2 个项目，一个使用 styled-components，另一个使用 css 模块。样式化的组件有时会出现问题，因为如果你不正确地使用它们，你会破坏你的命名空间，不仅如此，你还可能弄乱你的 HTML 标签。我用styled component只写了页面框，其他都是用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}
        />

就我个人而言，我不喜欢混合顾虑，所以我会只选择样式组件，就这样，干杯

同时使用样式组件和 css 模块是一种习惯吗？

Is it a practise to use styled components and css modules at the same time?

reactjs

styled-components

styling