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

【问题标题】：Beginner: I integrated a blog into my Javascript/React website, but how do I add styling?初学者：我将博客集成到我的 Javascript/React 网站中，但是如何添加样式？
【发布时间】：2020-01-08 09:25:20
【问题描述】：

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

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

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

【问题讨论】：

看看this

标签： javascript css reactjs blogs

【解决方案1】：

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

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

请注意，您必须导入 css 文件：

import './ccsFileName.css';

【讨论】：

【解决方案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

【讨论】：

谢谢！那么我会在哪里添加这个呢？ --> /blog/posts/${post.slug}}>{post.title} 把它包起来？
@cryptodactyl 试试这个 {post.title }