Установка комплекса реагирует на встроенные стили, такие как наведение, активный на реагирующих компонентах, таких как кнопка

Ответ 1

CSS в JS (с псевдоклассами и поддержкой MQ)

Есть множество libs для написания CSS с React, который поддерживает псевдо-классы, но все, если не все из них требуют, чтобы вы встраивали или записывали ваш CSS в JS, который я очень рекомендую

CSS-модули (напишите свой CSS как обычно, но лучше)

Существует также CSS-модули, которые, если вы уже используете Webpack следует просто настроить его, что позволит вам import/require ваш CSS как объект использовать его как ваш компонент:

import styles from './Button.css'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {styles.primary}
        {...rest}
    >
        {children}
    </button>
);

Развязка ваших компонентов

Я бы также добавил, что вы не должны передавать классы в <Button /> и иметь дело с условиями внутри самого компонента. Например, используя classnames lib вы можете сделать что-то вроде следующего.

import classnames from 'classnames'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        {/* 
          depends on the type prop, you will get the relevent button 
          so no need for consumers to care about the internals of the component
        */}
        className = {classnames('.btn', { [`btn-${type}`]: true })}
        {...rest}
    >
        {children}
    </button>
);

Вы даже можете комбинировать CSS-модули и classnames lib, чтобы создать несколько мощных комбинаций.

Ответ 2

Лично я бы использовал глобальный CSS и подключить его к Webpack. Он будет держать ваш React намного чище и, конечно, более модульным и легко отредактированным.

Насколько я знаю, функции SCSS не могут использоваться встроенными с вашим React.

Если вам нужно установить встроенные стили в React, выполните следующие действия:

var buttonStyle = {
    backgroundColor: "#229ac8",
    backgroundImage: "linear-gradient(to bottom, #23a1d1, #1f90bb)",
    backgroundRepeat: "repeat-x",
    borderColor: "#1f90bb #1f90bb #145e7a",
    color: "#ffffff",
    textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)"
}

<button style={buttonStyle}>Button</button>

Ответ 3

Вы можете установить объект javascript со встроенными стилями в кнопке, чтобы динамически менять цвет. Например:

const normalButtonStyle = {
  background:'gray',
  color:'black',
  borderColor:'white'
}
const buttonCompleteStyle = {
  background:'red',
  color:'white',
  borderColor:'black'
} // this can be included in from another file as a style object as well

const MyButton = ({children, status, onClick, classNames, ...rest }) =>
(
  <button
    onClick   = {onClick}
    className = {`${classNames}`}
    {...rest}
    style={status === 'complete' ? buttonCompleteStyle : normalButtonStyle}
  >
    {children}
  </button>
);

Не проверено, но что-то в этом роде. Посмотрите, как Material UI делает это.

Ответ 4

Вопрос 1:

Как настроить стиль кнопки как встроенный?

Из официального docs:

В React встроенные стили не указаны в виде строки. Вместо этого они указываются с объектом, ключ которого является версией имени стиля camelCased, а значением которого является значение стиля, обычно строка

Учитывая следующий css

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

Внутристрочное представление этого стиля было бы

const MyButton = () =>
(
    <button
        className = { {
            backgroundColor: '#229ac8',
            backgroundImage: 'linear-gradient(to bottom, #23a1d1, #1f90bb)',
            backgroundRepeat: 'repeat-x',
            borderColor: '#1f90bb #1f90bb #145e7a',
            color: '#ffffff',
            textShadow: '0 -1px 0 rgba(0, 0, 0, 0.25)'
        } }
    </button>
);

Вопрос 2

Кроме того, могу ли я использовать некоторые функции scss, такие как mixins, реагировать на создание стилей кнопок, динамически передающих цвет как переменную?

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

Смесь scss, подобная этой

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

Может быть выполнено с помощью

const borderRadius = ($radius) => {
    return {
        WebkitBorderRadius: $radius;
        MozBorderRadius: $radius;
        MsBorderRadius: $radius;
        borderRadius: $radius;
    }
}

const MyComponent = () => {
    var inlineStyle = Object.assign({}, borderRadius(10), {
        backgroundColor: 'white'
    })

    return (
        <div style={ inlineStyle }>
            Hello, world!
        </div>
    )
}

Вопрос 3

Должен ли я использовать встроенные стили или имена классов, используя css в js?

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

Ответ 5

• Как установить стиль кнопки в виде встроенного стиля?

React выталкивает все встроенные стили с помощью синтаксиса литерального объекта и выбрал не поддерживать специальный синтаксис для псевдофитов или префиксных значений поставщика, таких как display: -ms-flex (whattt no flexbox поддержка!?). Это вряд ли изменится, хотя, если вы следуете за потоками сериализации объектных литералов в строки, это не игра, в которой они хотят быть в течение длительного времени, поэтому я не думаю, что этот синтаксис продлится. Имеет много общего с устаревшим кодом FB. Иногда мы забываем, что мы только потребляем React, они являются первичными пользователями, определяющими варианты использования, поэтому иногда мы получаем часть своего технического долга, используя их структуру. интересный побочный эффект использования какой-либо elses-структуры, которая должна поддерживать достаточно старый код, который влияет на эволюцию структуры.

2. Кроме того, могу ли я использовать некоторые функции scss, такие как mixins, реагировать на создание стилей кнопок, динамически передающих цвет как переменную?

Миксины - это в основном простые функции, записывают функцию в JS для выполнения ваших вычислений и импортируют их, как и любой другой JS-модуль. Чтобы использовать переменную в шаблоне шаблона ES5/ES6 (синтаксис ``, используемый ниже), используйте следующий синтаксис ${ myVar }. Так будет выглядеть:

    import React from 'react';
    import Style from 'style-it';
    import someFuncThatCalcsFontSize from '../someFuncThatCalcsFontSize';

    class Intro extends React.Component {
      render() {
        var fontSize = someFuncThatCalcsFontSize('large');

        return Style.it(`
          .btn-primary {
             font-size: ${ fontSize }px;
          }
        `,
          <button className="btn-primary"> Primary Button </button>
        );
      }
    }

export default Intro;

3. Должен ли я использовать встроенные стили или имена классов, используя css в js?

Использовать имена классов (ссылаясь на сценарий CSS-in-JS inline vs classnames), сохранять его семантическим, помогать разработчикам быстрее расшифровывать разметку, понимать их контекст и быстрее развиваться быстрее.

Сделано Стиль It и отлично подходит для вашего сценария - включил JSFiddles. Простота - это король, здесь вы идете:

npm install style-it --save

Функциональный синтаксис (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .btn-primary {
         background-color: #229ac8;
         background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
         background-repeat: repeat-x;
         border-color: #1f90bb #1f90bb #145e7a;
         color: #ffffff;
         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
      .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
        background-color: #1f90bb;
        background-position: 0 -15px;
      }
    `,
      <button className="btn-primary"> Primary Button </button>
    );
  }
}

export default Intro;

Синтаксис JSX (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .btn-primary {
          background-color: #229ac8;
          background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
          background-repeat: repeat-x;
          border-color: #1f90bb #1f90bb #145e7a;
          color: #ffffff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        }
        .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
          background-color: #1f90bb;
          background-position: 0 -15px;
        }
      `}

      <button className="btn-primary"> Primary Button </button>
    </Style>
  }
}

export default Intro;

Для тех, кого волнует, в пакете нет вспышки незакрепленного контента (FOUC-free), крошечный размером около 1,8 тыс., в автоматическом режиме, изоморфен и не имеет встроенного шага для ускорения сборки!

Ответ 6

hover: с использованием крючков:

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

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