Как получить доступ к переменным CSS внутри функции props из стилизованных компонентов? - PullRequest
Новая
       60

Как получить доступ к переменным CSS внутри функции props из стилизованных компонентов?

0 голосов
/ 03 ноября 2019

У меня есть приложение React. Это использует стилизованные компоненты. В файле main.css я определил переменную наподобие - 

:root {
  primaryColor: 'red';
}

В приложении React у меня есть стилизованные компоненты, такие как (не работает) - 

const myDiv = styled.div`
  color: ${props => props.color? props.color : var(--primaryColor)};
`;

// Неработая

Если я использую стилизованный компонент как (рабочий) - 

 const myDiv = styled.div`
  color: var(--primaryColor);
 `;

Это работает.

Как заставить работать первый случай? которая предназначена для доступа к переменной css внутри стилизованного компонента.

1 Ответ

3 голосов
/ 03 ноября 2019

Вы находитесь внутри выражения, которое возвращает содержимое props.color или строку, содержащую выражение var. Поскольку это строка, вам нужно заключить ее в кавычки. 

const MyDiv = styled.div`
  color: ${props => props.color? props.color : 'var(--primaryColor)'};
`;

ReactDOM.render(
  <MyDiv>Some text</MyDiv>,
  root
);
:root {
  --primaryColor: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.0/styled-components.js"></script>

<div id="root"></div>
...