时间戳

首页 > 解决方案 > 同时使用样式化组件和 css 模块是一种做法吗？

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

问题描述

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

标签： reactjsstyled-componentsstyling

解决方案

从来没有见过这两种方法的混合，但这并没有错。这可能是一种不好的做法，您为同一事物创建了 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，就是这样，干杯

推荐阅读