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)};

border变量已经在${}内部的JavaScript表达式中，因此可以直接使用该变量。

Fixed Demo

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

1 个答案: