Nano Hash - криптовалюты, майнинг, программирование

как применить несколько свойств стилей зависит от состояния styled-components

Можно ли применить сразу несколько стилей свойств?

const Button = styled.div`
  color: blue;
  opacity: 0.6;
  background-color: #ccc;
`

Мне нужно передать активное свойство, которое повлияет на цвет, непрозрачность, цвет фона. Как я могу применить стили для активной кнопки сразу, вместо того, чтобы объявлять условия для каждого свойства?

const Button = styled.div`
  color: ${props.active ? 'green' : 'blue'};
  opacity: ${props.active ? 1 : 0.6};
  background-color: : ${props.active ? 'white' : '#ccc'};
reactjs javascript css styled-components
17.03.2020

Ответы:


1

Распространенный подход — условный рендеринг блоков CSS с помощью css API:

const first = css`
  color: green;
  opacity: 1;
  background-color: white;
`;

const second = css`
  color: blue;
  opacity: 0.6;
  background-color: #ccc;
`;

const Button = styled.div`
  ${({ active }) => (active ? first : second)}
`;

const App = () => {
  const [active, trigger] = useReducer(p => !p, false);
  return (
    <Button active={active} onClick={() => trigger()}>
      Press Me
    </Button>
  );
};

Редактировать сырое небо-93y2d

Или с помощью обычных утилит, таких как swithProp from styled-tools:

import styled, { css } from "styled-components";
import { switchProp, prop } from "styled-tools";

const Button = styled.button`
  font-size: ${switchProp(prop("size", "medium"), {
    small: prop("theme.sizes.sm", "12px"),
    medium: prop("theme.sizes.md", "16px"),
    large: prop("theme.sizes.lg", "20px")
  }, prop("theme.sizes.md", "16px"))};
  ${switchProp("theme.kind", {
    light: css`
      color: LightBlue;
    `,
    dark: css`
      color: DarkBlue;
    `
  }, css`color: black;`)}
`;

<Button size="large" theme={{ kind: "light" }} />
17.03.2020
  • Здесь нет необходимости использовать css со статическими стилями, вы можете просто не использовать его. 17.03.2020
  • Я не понимаю, что значит оставить это 17.03.2020
  • Отбросьте css в стилях first,second и используйте только литералы шаблонов, вот что я имел в виду. 17.03.2020
  • Можете ли вы сделать пример (у вас есть песочница в ответ) 17.03.2020
  • Это не очень хорошая идея, так как таким образом вы не получаете автозаполнение и линтинг (это просто строка). 17.03.2020
  • А, понятно, хорошая мысль. Я думаю, потерянный DX не гарантирует сохранения импорта для css. +1 за ваше разъяснение 17.03.2020

    • 2

    Создайте два класса и переключите эти классы в соответствии со свойством active

    Например -

    CSS

    .activeClass{
  color:  green;
  opacity:  1 ;
  background-color:white;
}

.inactiveClass{
  color: blue;
  opacity:  0.6;
  background-color: #ccc;
 }

    в рендеринге

    <button id="mybtn"  className={this.props.active ? 'activeClass' : 'inactiveClass'} >mybutton</button>

    см. рабочий пример здесь

    17.03.2020
  • OP спрашивает о стилизованных компонентах (css-in-js). 17.03.2020
  • @DennisVash, но это по-прежнему остается хорошей практикой и удобно для обслуживания. Это хороший совет, который заслуживает объяснения в ответе. 17.03.2020
  • Редактирование classNames в css-in-js — очень необычная практика. 17.03.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..