具有道具时的 Reactjs 样式组件无法获得主题颜色

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 returns 稍后由表达式处理以提供值的函数。

您可以通过记录值来查看函数：

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

第一个 border 变量是一个函数，而第二个已经转换为字符串，因为它位于 `` 中。

一个简单的解决方案是：

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

border变量已经在JavaScript表达式中，在${}中，所以变量可以直接使用。

Fixed Demo

具有道具时的 Reactjs 样式组件无法获得主题颜色

Reactjs styled-components when having props can't get theme color

reactjs

styled-components