Новичок: я интегрировал блог в свой сайт Javascript / React, но как мне добавить стили? - PullRequest
Новая
       6

Новичок: я интегрировал блог в свой сайт Javascript / React, но как мне добавить стили?

3 голосов
/ 08 января 2020

Я встроил блог в свою веб-страницу, и его функциональность есть. Однако и страница блога, и ссылка, которая указывает на список сообщений блога, не имеют стиля 

<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>
    )
  }
}

Ответы [ 2 ]

1 голос
/ 08 января 2020

Я думаю, что лучше всего использовать внешний файл css. Вы можете использовать className = "CLASS_NAME" в ваших компонентах. Например: 

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

Обратите внимание, что вам необходимо импортировать файл css: 

import './ccsFileName.css';
0 голосов
/ 08 января 2020

Несколько способов

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>

для справки Стиль и CSS

...