同时使用样式化组件和 css 模块是一种做法吗？答案

【问题标题】：Is it a practise to use styled components and css modules at the same time?同时使用样式化组件和 css 模块是一种做法吗？
【发布时间】：2021-10-21 04:08:55
【问题描述】：

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

【问题讨论】：

标签： reactjs styled-components styling

【解决方案1】：

从未见过这两种方法的混合，但这并没有错。这可能是一种不好的做法，您为同一事物创建了 2 个模式，这可能会造成混淆。

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

我个人不喜欢混合关注点，所以我只会选择 styled-components，就是这样，干杯

【讨论】：