React Styling в реквизите

Я сделал некоторые стили для материальной кнопки пользовательского интерфейса, и теперь я хочу переместить часть style = {{backgroundColor}} в верхнюю часть функции, прямо перед возвратом.

Кто-нибудь знает, как это сделать?

const styles = {
  root: {
    color: "#FFFFFF",
    backgroundColor: "#05164D",
    transition: "linear 0.5s",
    "&:hover": {
      opacity: 0.9,
      boxShadow: "0 3px 5px 2px rgba(153, 153, 153, .8)"
    }
  }
};

const StyledButton = props => {
  const { classes } = props;
  let customColor = props.customColor || "#05164D";
  let backgroundColor = customColor;

  return (
    <div>
      <IconButton
        className = {classes.root}
        {...props}
        aria-label = "StyledButton"
        style = {{ backgroundColor }}
      />
    </div>
  );
};

export default withStyles(styles)(StyledButton);

Непонятно, в чем проблема и почему вы хотите переехать style

— 14.03.2019 14:31

reactjs styling

14.03.2019 14:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, важно отметить, что {backgroundColor} — это сокращение от {backgroundColor: backgroundColor}. Таким образом, в ES6 вы можете просто использовать имя переменной, если значение свойства должно совпадать с именем переменной. Эта переменная инициализируется внутри фигурных скобок, которые заключают в себе значение свойства. Вот почему это {{ backgroundColor }}. Если вы хотите инициализировать переменную над рендером, вы можете сделать это следующим образом.

const StyledButton = props => {
  const { classes } = props;
  let customColor = props.customColor || "#05164D";
  let style = { backgroundColor: customColor };

  return (
    <div>
      <IconButton
        className = {classes.root}
        {...props}
        aria-label = "StyledButton"
        style = {style}
      />
    </div>
  );
};

14.03.2019 15:42

Другие вопросы по теме

В PHP-скрипте ничего между <этими скобками> не будет отображаться в браузере

Designinig SASS Я хочу макет Box, но не могу его получить

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

Переопределение стиля тела в html

Условный стиль ячеек в таблице на основе диапазона значений, которые различаются для каждой строки (R)

Обтекание текстом в нумерованном списке

Intellij IDEA, стиль кода для объекта javascript, как удалить кавычки, когда это не нужно вокруг ключа?

Авторазмер высоты Vaadin RichTextArea

Выровняйте SVG по центру кнопки с серым фоном

Встроенный стиль в реакции (прогресс на панели прогресса)

React Styling в реквизите

Ответы 1

Другие вопросы по теме

Похожие вопросы