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

У меня есть приложение 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 внутри стилизованного компонента.


reactjs css react-props styled-components css-variables
person Bijoy valappil    schedule 03.11.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы находитесь внутри выражения, которое возвращает содержимое 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>

person Ori Drori    schedule 03.11.2019