Reactjs Styled-компоненты, когда реквизит не может получить цвет темы

Question

Вот код

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import theme from "styled-theming";

const color = theme("mode", {
  default: "blue",
  primary: "tomato"
});

const border = theme("mode", {
  default: "yellow",
  primary: "purple"
});

const Container = styled.div`
  display: block;
  color: ${color};
  border: 3px solid ${props => (props.textAlign ? "none" : `${border}`)};
`;

function App() {
  return (
    <div>
      <Container theme={{ mode: "primary" }} textAlign={"center"}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </Container>
      <Container theme={{ mode: "default" }}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </Container>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<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>

Вот рабочий пример https://codesandbox.io/s/old-http-649gc

Проблема здесь border: 3px solid ${props => (props.textAlign ? "none" : ${border})} независимо от того, есть ли у меня textAlign или нет,Я не могу получить тему ${border} цвет

Answer 1

Проблема здесь в том, что styled-theming возвращает функцию, которая позже обрабатывается выражением для предоставления значения.

Вы можете просмотреть функцию, зарегистрировав значения:

console.log(border, `${border}`)

Первая border переменная - это функция, в то время как вторая была преобразована в строку, поскольку она находится внутри ``.

. Простое решение:

border: 3px solid ${props => (props.textAlign ? "none" : border)};

*Переменная 1013 * уже находится внутри выражения JavaScript, находящегося внутри ${}, поэтому переменная может использоваться напрямую.

Исправлено Демо