Понимание того, как подходить к стилю в React

Я новичок в изучении React. В качестве следующего этапа моего обучения мне нужно научиться стилизовать React. Исходя из предыдущего опыта, я должен предпринять следующие шаги для стилизации приложения React:

  1. Добавить Сброс CSS
  2. Внедрить грид-систему
  3. Реализуйте общие стили для таких элементов, как (кнопки, заголовки)
  4. Реализуйте определенные стили для каждого компонента

В мире React сложно найти хорошую отправную точку для решения вышеперечисленного, поэтому я бы с удовольствием посоветовал мне указать верное направление.

Являются ли стилевые компоненты самой популярной вещью в мире React на данный момент для всех 4 предметов, перечисленных выше? Если нет, то что вы посоветуете мне начать изучать, чтобы справиться с пунктами, упомянутыми выше.

Спасибо

Источник

1 ответ

Решение

Если вы начинаете с React, я бы не пошел с чем-то глубоким, как styled-components без первого понимания проблемы styled-components пытается исправить.

Ваш первый подход должен быть таким же простым, как просто добавить один или несколько <link> с вашим .css файлы (например, reset.css, grid.css, селекторы компонентов в нем и т. д.) и использовать соответствующие classNames реквизит в ваших компонентах:

// main.css
body {
  // ...
}

// MyToolbar.css
.MyToolbar {
  // style for a MyToolbar react component
}

в вашем HTML:

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="reset.css">
       <link rel="stylesheet" type="text/css" href="main.css">
       <link rel="stylesheet" type="text/css" href="grid.css">
       <link rel="stylesheet" type="text/css" href="MyToolbar.css">

По мере роста вашего приложения вам будет трудно поддерживать это <head>, так что вы бы выиграли от более модульного подхода.

Например, следующим шагом может быть импорт CSS из JavaScript вместо использования <link> в вашем заголовке:

// App Component
import React from 'react';

// import globally used styles
import './styles/reset.css';
import './styles/main.css';

export default class App extends React.Component {
// snip
}

Чтобы импортировать файлы CSS в JavaScript, вам нужно использовать пакетный модуль, такой как веб-пакет, для обработки этих файлов. import заявления. Начните читать здесь: https://webpack.js.org/guides/asset-management/. Таким образом, вам не нужно вручную вставлять файлы CSS в <head>,

Фактически, вы сможете импортировать ваш CSS из ваших компонентов:

// MyToolbar.js component
import React from 'react';
import './styles/MyToolbar.css';

export default class MyToolbar extends React.Component {
   render() {
      // render your component here
   }
}

Как только ваше приложение вырастет, вы можете поэкспериментировать с другими решениями, например, styled-компонентами.

Источник
Другие вопросы по тегам