初学者：我在Javascript/React网站中集成了一个博客，但如何添加样式？

我在我的网页中集成了一个博客，功能就在那里。但是，博客页面和指向博客文章列表的链接都没有样式

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

{post.title}

上面的代码返回博客条目标题列表。不过，我想设计这两个页面的样式，使其看起来更好。博客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>
    )
  }
}

类应用程序扩展组件{
状态={
元：{}，
数据：[]
}
异步组件didmount（）{
const{match}=this.props
让page=match.params.page | | 1
const resp=wait butter.post.list（{page:page，page_size:10}）
此设置状态（相应数据）
}
渲染（）{
const{next_page，previous_page}=this.state.meta
返回(
{this.state.data.map（（post，key）=>{
返回(
{post.title}
)
})}


{上一页&&(
上
)}
{下一页&&(
下一个
)}
)
}
}

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

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

多途径

1-使用类设置样式

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

3-内联样式

  <div style={{color:'red',fontSize:30}}> ... </div>

。。。

---

供您参考

看一下谢谢！那么我应该在这里的什么地方添加这些内容？-->{post.title}就这样吧？@cryptodactyl试试这个{post.title}

  <div style={myStyle}> ... </div>

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

  <div style={{color:'red',fontSize:30}}> ... </div>