入门者：我将博客集成到我的Javascript / React网站中，但是如何添加样式？

Question

我将博客集成到我的网页中，并且具有该功能。但是，博客页面和指向博客文章列表的链接都没有样式

<Link to={`/blog/posts/${post.slug}`}>{post.title}</Link>    

上面的代码返回博客条目标题的列表。但是，我想设置两个页面的样式，使其看起来更好。 Blog API没有任何样式。我该怎么办？

class App extends Component {
  state = {
    meta: {},
    data: []
  }
  async componentDidMount () {
    const { match } = this.props
    let page = match.params.page || 1

    const resp = await butter.post.list({ page: page, page_size: 10 })
    this.setState(resp.data)
  }
  render () {
    const { next_page, previous_page } = this.state.meta

    return (
      <div>
        {this.state.data.map((post, key) => {
          return (
            <div key={key}>
            <Link to={`/blog/posts/${post.slug}`}>{post.title}</Link>
            </div>
          )
        })}

        <br />

        <div>
          {previous_page && (
            <Link to={`/${previous_page}`}>
              <a>Prev</a>
            </Link>
          )}

          {next_page && (
            <Link to={`/${next_page}`}>
              <a>Next</a>
            </Link>
          )}
        </div>
      </div>
    )
  }
}

Answer 1

我认为最好的方法是使用外部CSS文件。您可以在组件中使用className =“ CLASS_NAME”。例如：

<div className="mycontainer"> ... </div>

注意，您必须导入css文件：
import './ccsFileName.css';

Answer 2

多种方式

1使用类的样式

<div className="myClass"> ... </div>

2

-对象样式 <div style={myStyle}> ... </div>

Css
  const myStyle={
   color:'red',
   fontSize:20
   }

3

-内联样式 <div style={{color:'red',fontSize:30}}> ... </div>

供参考Styling and CSS