使用有样式的组件，一个组件如何根据不同的情况有不同的样式?

Question

Sandbox: https://codesandbox.io/s/nice-kirch-i1y58?file=/src/App.js:1384-1449

我有三个计算，每个计算都向输出组件输出一个值。我使用相同的输出组件三次。第一个Output组件根据正在计算的输出值更改背景颜色。

现在我想为基于不同值的第二次计算使用完全不同的背景颜色。

我希望第三个输出框不改变颜色-只是一个纯色的背景色，而不管它的值。

我该怎么做呢?根据上下文切换背景颜色样式。这里是代码沙箱:点击这里。我唯一能想到的是创建三个不同的输出组件，而不是尝试使用相同的组件，但我觉得可能有更好的方法来实现这一点。

下面是输出框样式组件的一小段代码，它改变了第一个框的颜色——Output.styles.js:

import styled from "styled-components";
export const OutputBox = styled.div`
box-sizing: border-box;
border-radius: 5px;
width: 195px;
height: 56px;
padding: 18px 10px;
font-size: 16px;
color: #000000;
background-color: ${(props) =>
props.color >= 101
? "red"
: props.color >= 30 && props.color <= 60
? "yellow"
: props.color >= 61 && props.color <= 100
? "blue"
: "pink"};
`;

在Output.js中:

const Output = ({ title, value, color }) => (
<div>
<OutputLabel>{title}</OutputLabel>
<OutputBox color={color}>{value}</OutputBox>
</div>
);

在App.js中:

<Output color={outputOne} title="Output One" value={outputOne} />

我希望第二个输出框的背景颜色是这样改变的:

background-color: ${(props) =>
props.secondColor >= 90
? "gray"
: props.secondColor >= 89 && props.secondColor <= 50
? "teal"
: props.secondColor >= 49 && props.secondColor <= 25
? "purple"
: "green"};

第三个输出框我只想让它是一个颜色:

background-color: "maroon"

Answer 1

我认为你有两种选择。两者都基于条件语句。我认为所有你需要使用的是移动你的条件语句到组件，而不是内部的样式。您可以使用条件语句向输入框中添加一个具有您喜欢的背景颜色样式的类，或者使用内联样式和backgroundColor属性覆盖任何样式。我认为在这种情况下，使用内联样式可能更容易添加到您的输出组件:

const color = props.secondColor >= 90 ? "gray"  : ...rest of your code
<input style={{backgroundColor: color}} />