Реагировать на использование переменных темы внутри стиля из стилевых компонентов - PullRequest
Новая
       26

Реагировать на использование переменных темы внутри стиля из стилевых компонентов

0 голосов
/ 16 октября 2019

В настоящее время я пытаюсь создать тему с помощью styled-components и styled-system. Я создал тему со всем необходимым стилем (theme.js), button.jsx со стилизованными компонентами и вариантами.

В моем theme.js есть цвета, и есть режим (темный) с цветами. 

//default
500: "#139ebe",

//modes
modes: {
  dark: {
    blues: {
      500: "white"
    }
  }
}

Они объединяются в один объект темы. 

const getTheme = mode =>
  merge({}, theme, {
    colors: get(theme.colors.modes, mode, theme.colors)
  });

Когда режим темный, он должен получать цвета из темного режима. Когда нет режима, он должен получить нормальные цвета.

Через реквизиты я могу получить доступ к текущей теме (см. Button.jsx, строка 77). 

const Button = props => {
  console.log("Current theme: ", props.theme.colors.blues[500]);
  return <ButtonElem as="button" {...props} />;
};

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

const ButtonElem = styled("div")(

Демо:

Откройте консоль в codeandbox, вы увидите текущийтема. Уберите темный режим и сохраните его, после чего вы увидите изменения. https://codesandbox.io/s/blue-cache-bp9ns?fontsize=14

1 Ответ

0 голосов
/ 18 октября 2019

Это правильный способ передачи реквизита в вариант 

const type = props => (variant({

}));
...