Лучшие практики React.js во встроенном стиле


512

Я знаю, что вы можете указывать стили в классах React, например так:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Должен ли я стремиться делать все стили таким образом, и в моем CSS-файле вообще не указаны стили?

Или мне следует полностью избегать встроенных стилей?

Кажется странным и грязным делать немного того и другого - нужно проверить два места при настройке стиля.


Вы можете использовать реагирующую тему, чтобы упорядочить встроенные стили и сделать их легко настраиваемыми при создании повторно используемого компонента. Он работает аналогично ThemeManager в Material-UI .
Мантрамантрамантра

6
Попробуйте использовать github.com/css-modules/css-modules . github.com/gajus/react-css-modules является реализацией React (автором которой я являюсь). Модули CSS и модули React CSS автоматически сопоставляют имена классов компонентов с модулями CSS, которым присваивается уникальное имя в области видимости документа.
Gajus

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

Использование атрибута style в качестве основного средства оформления элементов обычно не рекомендуется. ( reactjs.org/docs/dom-elements.html#style )
Омид Эбрахими,

На сегодняшний день я рекомендую использовать решение css-in-js. В нем есть все преимущества атрибута style, без недостатков. Я написал ответ stackoverflow.com/questions/26882177/…
Бен Карп

Ответы:


463

Существует не так много "лучших практик". Те из нас, кто использует встроенные стили для компонентов React, все еще очень много экспериментируют.

Есть несколько подходов, которые сильно различаются: Реагируйте на диаграмму сравнения библиотек inline-style

Все или ничего?

То, что мы называем «стилем», на самом деле включает в себя довольно много концепций:

  • Макет - как элемент / компонент выглядит по отношению к другим
  • Внешний вид - характеристики элемента / компонента
  • Поведение и состояние - как элемент / компонент выглядит в данном состоянии

Начните с государственных стилей

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

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

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Обратите внимание, что мы используем класс для оформления внешнего вида, но больше не используем .is-префиксный класс для состояния и поведения .

Мы можем использовать Object.assign(ES6) или _.extend(подчеркивание / lodash), чтобы добавить поддержку нескольких состояний:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Настройка и повторное использование

Теперь, когда мы используем Object.assignего, становится очень просто сделать наш компонент многократно используемым с разными стилями. Если мы хотим , чтобы переопределить стили по умолчанию, мы можем сделать это в колл-сайта с реквизитом, например , так: <TodoItem dueStyle={ fontWeight: "bold" } />. Реализовано так:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

раскладка

Лично я не вижу веской причины для встроенных стилей макета. Существует множество отличных систем макетов CSS. Я бы просто использовал один.

Тем не менее, не добавляйте стили макета непосредственно в ваш компонент. Оберните ваши компоненты компонентами макета. Вот пример.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

Для поддержки макета я часто пытаюсь спроектировать компоненты, чтобы быть 100% widthи height.

Внешность

Это самая спорная область дебатов "в стиле". В конечном счете, все зависит от вашего дизайна и комфорта вашей команды с JavaScript.

Одно можно сказать наверняка, вам понадобится помощь библиотеки. Состояние браузера ( :hover,:focus ) и медиа-запросы болезненны в сыром React.

Мне нравится Radium, потому что синтаксис этих жестких частей разработан для моделирования синтаксиса SASS.

Код организации

Часто вы видите объект стиля вне модуля. Для компонента списка задач он может выглядеть примерно так:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

функции получения

Добавление логики стиля к вашему шаблону может стать немного грязным (как видно выше). Мне нравится создавать функции получения для вычисления стилей:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Дальнейшее наблюдение

Я обсуждал все это более подробно в React Europe в начале этого года: встроенные стили и когда лучше «просто использовать CSS» .

Я рад помочь, когда вы делаете новые открытия по пути :) Ударь меня -> @chantastic


10
Отличное чтение. Также очень ценю эту важную речь , @chantastic. #accepted
eye_mew

5
«Оберните ваши компоненты компонентами макета»: так очевидно, но именно то, что мне было нужно.
tandrewnichols

2
@chantastic отличный ответ. Год спустя, это все еще правда? На самом деле, только попадаю в React и идею встроенного стиля, и просто удивляюсь, изменилось ли что-нибудь после того, как вы опубликовали этот ответ.
alexrussell

4
@alexrussell спасибо! я думаю, что ответ здесь все еще довольно хорош. одна область, которая изменилась, заключается в том, что Aphrodite, кажется, является предпочтительной для сообщества библиотекой inline-styles (по сравнению с Radium), хотя на самом деле это вопрос личных предпочтений.
chantastic

2
@alexrussell упс. случайно представлен рано. Я теперь использую эту технику компонентов, чтобы стилизовать мои компоненты. Идея довольно проста. создавать компоненты, которые только связанные с применением стиля и композа с теми, вместо div, span, aи т.д. , это поможет стилю держать изолированный независимо от библиотеки вы используете. Компоненты
реагировать на сайт/#

135

Атрибут style в React ожидает, что значение будет объектом, то есть парой ключ-значение.

style = {}будет иметь другой объект внутри него, как {float:'right'}заставить его работать.

<span style={{float:'right'}}>{'Download Audit'}</span>

Надеюсь, что это решает проблему


3
так, как использовать медиа-запрос для того же, если я хочу использовать классы CSS в файле JS
Pardeep Jain

@PardeepJain Одним из способов является использование Emotion, здесь есть полная лекция об этом, если вы заинтересованы в саммите meet.js 2018
Бруно Фингер,

Недостатком этого подхода является то, что определение встроенных стилей каждый раз создает новый объект. Это создает разницу в styleопоре, которая может привести к проблемам с производительностью. По крайней мере, определите такой постоянный стиль вне вашего render. Надеюсь это поможет!
Доусон Б

49

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

Сначала я не был убежден, но после нескольких месяцев в этом я полностью преобразован и в процессе преобразования всего моего CSS в inline или другие методы css, управляемые JS.

Эта презентация сотрудника Facebook и участника React "vjeux" также очень полезна - https://speakerdeck.com/vjeux/react-css-in-js


5
Как я буду делать адаптивные макеты со встроенными стилями? У вас нет возможности для медиа-запросов здесь.
Зевс

Вы получаете мощь js, js может определять размеры браузера для динамического создания стилей.
JordyvD

3
@ g3mini это не рекомендуемый подход в настоящее время, в любом случае, так как есть гораздо более мощные решения для укладки компонентов , таких как CSS Modules, styled-componentsи других.
Denialos

В js тоже есть css =) Хотя сейчас я предпочитаю использовать CSS-модули.
JordyvD

Одна вещь, которая здесь не рассматривается, это то, что очень легко увидеть родительский и дочерний стили в одном и том же файле SASS, тогда как если вам нужно посмотреть на правила в разных компонентах, вам, возможно, придется открывать и закрывать много файлов.
Ринго

23

Основное назначение атрибута style - для динамических стилей, основанных на состоянии. Например, у вас может быть стиль ширины на индикаторе выполнения, основанный на каком-либо состоянии, или позиция или видимость, основанные на чем-то другом.

Стили в JS накладывают ограничение на то, что приложение не может предоставить пользовательские стили для повторно используемого компонента. Это вполне приемлемо в вышеупомянутых ситуациях, но не при изменении видимых характеристик, особенно цвета.


Связанная идея, которая у нас была в течение некоторого времени, заключается в возможности изолировать определенные правила CSS для компонента React, используя gulp и LESS. Вроде как установка определенного className для каждого компонента, затем добавление определенного CSS для этого класса в файле компонента. Это имело бы много смысла.
Дэвид Хеллсинг,

Я часто использую имена классов в формате "component- {app} - {componentName}". «{приложение}» может быть именем приложения или «общим» для независимых от приложения компонентов. например, "component-foo-todo-list" для TodoList и "component-common-light-switch-toggle". Для упакованных компонентов {app} будет именем npm. Это то, что вы имеете в виду?
Разбойник

Да, соглашение об именах - это одно, но главное - добавить изолированные правила CSS в один и тот же компонентный файл js.
Дэвид Хеллсинг

2
Это неправда. Вы можете определенно применить пользовательский стиль для реагирования компонентов. Компонент просто должен объединить свой собственный объект стиля с объектом, переданным сверху, который может быть получен из данных приложения. Посмотрите последние слайды на сайте speakerdeck.com/vjeux/react-css-in-js, как упомянуто ниже
Флион

Конечно, если ваш компонент является единым элементом, но учитывая, <div><a>foo <b>bar</b></a><table>...</table></div>как вы его оформляете из реквизита? Имейте в виду, что структура html должна оставаться деталью реализации, иначе вы потеряете много преимуществ, предоставляемых компонентами.
Разбойник

18

Джеймс Нельсон в своем письме «Почему вы не должны разрабатывать компоненты React с помощью JavaScript» утверждает, что на самом деле нет необходимости использовать встроенные стили с его недостатками. Он утверждает, что старое скучное css с less / scss - лучшее решение. Часть его диссертаций в пользу css:

  • расширяемый снаружи
  • Leverable (встроенные стили перекрывают все)
  • дизайнер-дружественный

10

Стилизация в JSX очень похожа на стилизацию в HTML.

HTML-кейс:

div style = "background-color: red; color: white"

Дело JSX:

div style = {{backgroundColor: 'red', color: 'white'}}


8

Что я делаю, так это присваиваю каждому из моих повторно используемых компонентов уникальное имя пользовательского элемента, а затем создаю файл CSS для этого компонента, в частности, со всеми параметрами стилей для этого компонента (и только для этого компонента).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

И в файле 'custom-component.css' каждая запись будет начинаться с тега custom-component:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

Это означает, что вы не теряете критического понятия разделения заботы. Посмотреть против стиля. Если вы поделитесь своим компонентом, другим будет проще настроить его так, чтобы он соответствовал остальной части их веб-страницы.


Вот как я это делаю. Единственным недостатком является то, что это два файла вместо одного. Я могу жить с этим.
соус

5

Это действительно зависит от того, насколько велико ваше приложение, если вы хотите использовать такие упаковщики, как webpack пакет и объединять CSS и JS вместе в сборке, и то, как вы хотите управлять потоком приложений! В конце дня, в зависимости от вашей ситуации, вы можете принять решение!

Я предпочитаю организовывать файлы в больших проектах, разделяя CSS и JS файлы , проще делиться, людям с интерфейсом проще просто просматривать CSS-файлы, а также гораздо более аккуратную организацию файлов для всего приложения!

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

Я лично смешиваю их, в зависимости от моих потребностей, например ... Попробуйте использовать внешний CSS, но если необходимо, React также примет стиль, вам нужно передать его как объект со значением ключа, что-то вроде этого ниже:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;


3

У меня обычно есть файл scss, связанный с каждым компонентом React. Но я не вижу причины, по которой вы бы не инкапсулировали компонент с помощью логики и не заглядывали в него. Я имею в виду, у вас похожая вещь с веб-компонентами.


3

В зависимости от вашей конфигурации встроенный стиль может предложить вам горячую перезагрузку. Веб-страница немедленно перерисовывается каждый раз, когда меняется стиль. Это помогает мне быстрее разрабатывать компоненты. Сказав это, я уверен, что вы можете настроить среду горячей перезагрузки для CSS + SCSS.


3

Вы можете использовать встроенные стили, но у вас будут некоторые ограничения, если вы будете использовать их во всех своих стилях, некоторые известные ограничения - вы не можете использовать псевдо-селекторы CSS и медиа-запросы .

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

Я бы порекомендовал использовать модули CSS .

С помощью CSS-модулей у вас будет свобода писать CSS в CSS-файле, и вам не придется беспокоиться о конфликтах имен, об этом позаботятся CSS-модули.

Преимущество этого метода в том, что он предоставляет вам функциональность стилей для конкретного компонента. Это создаст гораздо более понятный код и читаемую архитектуру проекта для следующего разработчика, который будет работать над вашим проектом.


3

Для некоторых компонентов проще использовать встроенные стили. Кроме того, мне проще и лаконичнее (поскольку я использую Javascript, а не CSS) анимировать стили компонентов.

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

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

РЕДАКТИРОВАТЬ НОЯБРЬ 2019

Работая в отрасли (компания из списка Fortune 500), мне НЕ разрешается делать какие-либо встроенные стили. В нашей команде мы решили, что встроенный стиль не читается и не поддерживается. И, увидев из первых рук, как встроенные стили делают поддержку приложения совершенно невыносимой, я должен был согласиться. Я полностью не одобряю встроенные стили.


2

Проблема встроенных стилей заключается в том, что политики безопасности контента (CSP) становятся все более распространенными, что не позволяет этого. Поэтому я рекомендую полностью избегать встроенных стилей.

Обновление. Чтобы пояснить подробнее, CSP - это HTTP-заголовки, отправляемые сервером, которые ограничивают содержимое, отображаемое на странице. Это просто дальнейшее смягчение, которое может быть применено к серверу, чтобы не дать злоумышленнику сделать что-то непослушное, если разработчик плохо кодирует сайт.

Цель большинства этих ограничений - остановить атаки XSS (межсайтовый скриптинг). В XSS злоумышленник находит способ включить свой собственный javascript на вашу страницу (например, если я сделаю свое имя пользователя, bob<SCRIPT>alert("hello")</SCRIPT>а затем оставлю комментарий, и вы посетите страницу, на ней не должно отображаться предупреждение). Разработчики должны отрицать возможность добавления пользователем контента, подобного этому, на сайт, но на тот случай, если они допустили ошибку, CSP блокирует загрузку страницы, если обнаружит какие-либо script>теги.

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

Так что все это XSS, но что если злоумышленник не может включить <script>теги, но может включить <style>теги или включитьstyle= параметр в тег? Тогда он может изменить внешний вид сайта таким образом, что вы обмануты нажатием не той кнопки или какой-то другой проблемой. Это гораздо менее важно, но все же следует избегать этого, и CSP сделает это за вас.

Хороший ресурс для тестирования сайта на CSP - https://securityheaders.io/

Вы можете узнать больше о CSP по адресу: http://www.html5rocks.com/en/tutorials/security/content-security-policy/


Можете ли вы объяснить немного больше?
Дмитрий Мананников

8
Вы имеете в виду конкретно unsafe-inlineполитику. Эта политика позволяет ограничение элемента стиля <style>не встроенных стилей , примененных к атрибуту стиля элемента: <div style="">. Поскольку вопрос выше относится к атрибуту style, это плохой совет, чтобы полностью избегать встроенных стилей. Кроме того , reactсоветует , чтобы переместить все CSS в JS: github.com/reactjs/react-future/blob/master/04%20-%20Layout/...
potench

1
@ Потенциал, что ссылка была действительно великолепной, возможно, достойна своего собственного ответа
eye_mew

6
К сожалению, @eye_mew и @ Sam-Rad - ответ @potench неверный. CSP unsafe-inlineотключает все формы встроенных стилей, включая атрибут style. Вы можете программно использовать API стилей для элемента через JS (например elem.style.color = 'blue';), но вы не можете установить атрибут стиля для элемента (так же, как 'unsafe-inline'в директиве script-src запрещены встроенные теги сценария, но также onclickатрибуты и друзья.)
Алекс Секстон

2
Более подробную информацию от команды Facebook о том, как применяются стили в отношении CSP, можно найти в React v15 github.com/facebook/react/issues/5878 . Стоит прочитать
Марк Лундин

2

По сравнению с записью ваших стилей в CSS-файле атрибут стиля React имеет следующие преимущества :

  1. Возможность использовать инструменты javascript в качестве языка программирования обеспечивает контроль стиля ваших элементов. Это включает в себя встраивание переменных, использование условий и передачу стилей дочернему компоненту.
  2. «Компонентный» подход. Больше не нужно разделять код HTML, JS и CSS, написанный для компонента. Код компонента объединен и записан в одном месте.

Однако атрибут стиля React имеет несколько недостатков - вы не можете

  1. Не могу использовать медиа-запросы
  2. Не могу использовать псевдо-селекторы,
  3. менее эффективен по сравнению с классами CSS.

Используя CSS в JS, вы можете получить все преимущества тега стиля без этих недостатков. . На сегодняшний день существует несколько популярных хорошо поддерживаемых css в js-библиотеках, в том числе: Emotion, Styled-Components и Radium. Эти библиотеки предназначены для CSS, как React для HTML. Они позволяют вам писать свой CSS и контролировать свой CSS в своем коде JS.

давайте сравним, как будет выглядеть наш код для стилизации простого элемента. Мы создадим div "hello world", чтобы он показывался большим на рабочем столе и меньше на мобильном.

Использование атрибута стиля

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Так как медиа-запрос невозможен в теге стиля, нам нужно добавить className к элементу и добавить правило css.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Использование тега Emotion 10 css

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion также поддерживает строки шаблонов и стилизованные компоненты. Поэтому, если вы предпочитаете, вы можете написать:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

За капюшонами "Css in JS" используются классы css. Эмоция была специально разработана с учетом производительности и использует кеширование. По сравнению с атрибутами стиля React Css в JS обеспечит лучшую производительность.

Лучшие практики

Вот несколько рекомендаций, которые я рекомендую:

  1. Если вы хотите стилизовать свои элементы встроенно или в JS, используйте библиотеку css-in-js, не используйте атрибут style.

Должен ли я стремиться делать все стили таким образом, и в моем CSS-файле вообще не указаны стили?

  1. Если вы используете решение css-in-js, нет необходимости писать стили в файлах Css. Написание вашего CSS в JS лучше, так как вы можете использовать все инструменты языка программирования, которые предоставляет JS.

я должен полностью избегать встроенных стилей?

  1. Структурирование вашего кода стиля в JS очень похоже на структурирование вашего кода в целом. Например:
    • распознайте повторяющиеся стили и запишите их в одном месте. Есть два способа сделать это в Emotion:
// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}
  • Шаблон кодирования React состоит из инкапсулированных компонентов - HTML и JS, управляющий компонентом, записаны в одном файле. Вот где находится ваш код CSS / style для стилизации этого компонента.

  • При необходимости добавьте в свой компонент стайлинг. Таким образом, вы можете повторно использовать код и стиль, написанный в дочернем компоненте, и настраивать его в соответствии с вашими конкретными потребностями родительским компонентом.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

2

Вы также можете использовать StrCSS, он создает изолированные имена классов и многое другое! Пример кода будет выглядеть так: Вы можете (необязательно) установить расширение VSCode из Visual Studio Marketplace для поддержки подсветки синтаксиса!

источник: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

1

Некоторое время нам требуется стилизовать какой-то элемент из компонента, но если нам нужно отобразить только этот компонент или его стиль меньше, чем вместо использования класса CSS, мы используем встроенный стиль в реагировать на js. Встроенный стиль responsejs такой же, как встроенный стиль HTML, только имена свойств немного отличаются

Напишите свой стиль в любом теге, используя style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Не могли бы вы добавить дополнительную информацию о том, как и почему этот код дает ответ на вопрос ОП? Спасибо!
DeHaar

1

Обновление 2020: Лучшая практика - использовать библиотеку, которая уже выполнила тяжелую работу за вас и не убивает вашу команду, когда вы делаете переход, как указано первоначально принятым ответом в этом видео (это все еще актуально). Также, чтобы понять тенденции, это очень полезный график . Проведя собственное исследование по этому вопросу, я решил использовать Emotion для своих новых проектов, и он оказался очень гибким и масштабируемым.

Учитывая, что наиболее одобренный ответ от 2015 года рекомендовал Radium, который теперь переведен в режим обслуживания . Поэтому представляется разумным добавить список альтернатив. После прекращения Radium предлагает несколько библиотек. У каждого из сайтов, на которые есть ссылки, есть примеры, которые легко доступны, поэтому я воздержусь от копирования и вставки кода здесь.

  • Emotion, который «вдохновлен» стилевыми компонентами среди других, использует стили в js и может быть независимым от фреймворка, но определенно продвигает свою библиотеку React. Эмоции были в курсе с этого поста.
  • styled-components сопоставим и предлагает многие из тех же функций, что и Emotion. Также активно поддерживается. И Emotion, и styled-компоненты имеют схожий синтаксис. Он создан специально для работы с компонентами React.
  • JSS Еще одна опция для стилей в js, которая не зависит от фреймворка, хотя в ней есть несколько пакетов фреймворков, в том числе React-JSS.

0

В любом случае встроенный CSS никогда не рекомендуется. Мы использовали styled-компоненты в нашем проекте, который основан на JSS. Он защищает переопределение CSS, добавляя динамические имена классов в компоненты. Вы также можете добавить значения CSS на основе пропущенных реквизитов.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.