Параметры нескольких реквизитов для стилизованных компонентов - PullRequest
Новая
       37

Параметры нескольких реквизитов для стилизованных компонентов

0 голосов
/ 08 мая 2019

У меня есть компонент navbar, который я создал с помощью Styled Components. Я хотел бы создать некоторые реквизиты, которые меняют цвет фона и / или цвет текста.

Например: <Navbar dark> должен иметь следующий CSS: 

background: #454545;
color: #fafafa;

Тогда как <Navbar light> должно быть наоборот: 

background: #fafafa;
color: #454545;

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

background: #eee;
color: #333;

Теперь мой вопрос: как настроить это в Styled Components.

Я могу сделать следующее: 

background: ${props => props.dark ? #454545 : '#eee'}
background: ${props => props.dark ? #fafafa : '#eee'}
background:  #eee;

И что-то похожее на цвет.

Но это избыточно и не очень элегантно. Я хотел бы получить оператор if / else: 

background: ${ props => { 
  if (props.dark) { #454545 }
  elseif (props.light) { #fafafa }
  else { #eee }
}

Но я не знаю, как настроить что-то подобное в Styled Components.

Есть предложения?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Оставьте переданное в prop имя таким же. Тогда вы можете использовать оператор switch/case. Например, передавая color реквизит и используя его как type для сопоставления с case.

Рабочий пример :

Edit Simple Styled Components

Например: 

<Button color="primary">Example</Button>

компоненты / кнопка 

import styled from "styled-components";

const handleColorType = color => {
  switch (color) {
    case "primary":
      return "#03a9f3";
    case "danger":
      return "#f56342";
    default:
      return "#fff";
  }
};

const Button = styled.button`
  display: block;
  cursor: pointer;
  border: 0;
  margin: 5px 0;
  background: #000;
  font-size: 20px;
  color: ${({ color }) => handleColorType(color)};

  &:focus {
    outline: 0;
  }
`;

export default Button;

Если у вас есть несколько атрибутов (например, пара color и background), затем используйте ту же концепцию, что и выше, измените handleColorType, чтобы получить string с атрибутами, и вызовите функцию handleColorType без свойство стиля.

Например: 

<MultiButton color="primary">Example</Button>

компоненты / многокнопочный 

import styled from "styled-components";

const handleColorType = color => {
  switch (color) {
    case "primary":
      return "color: #03a9f3; background: #000;";
    case "danger":
      return "color: #fff; background: #f56342;";
    default:
      return "color: #000; background: #eee;";
  }
};

const MultiButton = styled.button`
  display: block;
  margin: 5px 0;
  cursor: pointer;
  border: 0;
  font-size: 20px;
  ${({ color }) => handleColorType(color)};

  &:focus {
    outline: 0;
  }
`;

export default MultiButton;
0 голосов
/ 12 мая 2019

Я решил использовать это решение: 

export const Navbar = styled.nav`
  width: 100%;

  ...  // rest of the regular CSS code

  ${props => {
    if (props.dark) {
      return `
        background: ${colors.dark};
        color: ${colors.light};
    `
    } else if (props.light) {
      return `
        background: ${colors.light};
        color: ${colors.dark};
    `
    } else {
      return `
        background: ${colors.light};
        color: ${colors.dark};
    `
    }
  }}
`
...