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

Question

我是从 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 网站时哪种方法是最佳实践？为什么？

Answer 1

首先，只有在从 API 获取数据时使用动态内容时，才不需要用方括号括起 className 名称。

您可以简单地执行以下操作:

<Link to={slug}>
 <div className="date">{publishDate</div> 
 <div className="time">{timeToRead} min read</div>
</Link>

第一种方法用于分别设置每个 React 组件的样式。 React Styled 组件 ;).