时间戳

首页 > 解决方案 > 在 React 网站中使用类和样式的最佳方式

css - 在 React 网站中使用类和样式的最佳方式

问题描述

我从 react 开始，我注意到许多项目中的以下编码风格：

方法一：

const Date = styled.h3`
  margin: 0 1rem 0.5rem 1rem;
  color: gray;
`

const ReadingTime = styled.h4`
  margin: 0 1rem 1.5rem 1rem;
  color: gray;
`

const Excerpt = styled.p`
  margin: 0 1rem 1rem 1rem;
  line-height: 1.6;
`

<Post>
      <Link to={`/${slug}/`}>
        <Date>{publishDate}</Date>
        <ReadingTime>{timeToRead} min read</ReadingTime>
        <Excerpt
          dangerouslySetInnerHTML={{
            __html: body.childMarkdownRemark.excerpt,
          }}
        />
      </Link>
    </Post>

方法二：

现在，如果我只使用：

<Post>
          <Link to={`/${slug}/`}>
            <div className={'date'}>{publishDate}</div>
            <div className={'time'}>{timeToRead} min read</div>
            <div className={'excerpt'}
              dangerouslySetInnerHTML={{
                __html: body.childMarkdownRemark.excerpt,
              }}
            />
          </Link>
        </Post>

并在 css 文件中设置所有样式。

创建 React 网站时哪种方法是最佳实践？为什么？

标签： cssreactjs

解决方案

这不是最佳实践问题，而是个人偏好、团队决定或基于要求的问题。两者都在做同样的事情，即对元素进行样式设置，但方法完全不同。

如果您想要基于组件的东西，封装在组件中（范围明智），动态（依赖 JavaScript 样式的组件），然后使用样式化组件。另一方面，如果你想要一些传统的、易于管理的东西，请使用 scss/css。

您甚至可以同时使用这两种情况，这种情况经常发生。

人们已经写过关于这些的文章。阅读这些以获取更多信息和说明。

希望这可以帮助 ！

推荐阅读