Реагировать.рекомендации по встроенному стилю js

Я знаю, что вы можете указать стили в классах 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?

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

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

13 ответов


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

существует ряд подходов, которые сильно различаются:React inline-style lib comparison chart

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

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

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

начните с state-styles

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

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

// 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), а медиа-запросы болезненны в raw React.

мне нравится Радий потому что синтаксис для этих жестких частей предназначен для моделирования Sass.

организация код

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

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


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

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

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

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


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

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

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


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

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


K Джеймс Нельсон в своем письме "почему вы не должны стиль реагировать компоненты с JavaScript" заявляет, что на самом деле нет необходимости использовать встроенные стили с его недостатками. Его утверждение заключается в том, что старый скучный css с меньшим/scss является лучшим решением. Часть его тезисов в пользу css:

  • extendable внешне
  • leverable (встроенные стили перескакивают все)
  • дизайнер-фрэндли

Я даю каждому из моих повторно используемых компонентов уникальное имя пользовательского элемента, а затем создаю файл 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 { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

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


Это действительно зависит от того, как большой ваше приложение, если вы хотите использовать bundlers как 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;

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


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


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

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

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

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

так что все XSS, но что, если злоумышленник не может включить <script> теги, но может включать в себя <style> теги или включить


для некоторых компонентов, проще использовать встроенные стили. Кроме того, я нахожу его более простым и сжатым (поскольку я использую 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
  }
}

затем, в componentWillMount (), я устанавливаю интервал так...

this.interval = setInterval(() => {
  let colors = this.state.colors;
  let opacity = this.state.opacity;

  if(this.props.reverse) {
    let color = colors[colors.length-1];
    colors.pop();
    colors.unshift(color)
  } else {
    let color = colors[0];
    colors.shift();
    colors.push(color);
  }

  opacity['opacity'] < 1 ? opacity['opacity']+=0.06 : null;

  this.setState({colors, opacity});
}, this.speed);

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

источник:https://github.com/jeffreylanters/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>;
  }
}

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

можно использовать Радий https://github.com/FormidableLabs/radium чтобы решить эту проблему, но все же, я чувствую, что проект растет, он станет громоздким.

Я бы рекомендовал использовать модули CSS https://github.com/css-modules/css-modules

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

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