reactjs - 样式组件的多个 Props 选项

Question

我有一个使用样式组件创建的导航栏组件。我想创建一些改变背景颜色和/或文本颜色的 Prop 。

例如:<Navbar dark>应具有以下 CSS:

background: #454545;
color: #fafafa;

而<Navbar light>应该是相反的:

background: #fafafa;
color: #454545;

但是，如果这两个属性都没有使用，那么我想要一个默认的背景和文本颜色 - 例如(用于演示目的)，如下所示:

background: #eee;
color: #333;

现在，我的问题是如何在样式组件中进行设置。

我可以执行以下操作:

background: ${props => props.dark ? #454545 : '#eee'}
background: ${props => props.dark ? #fafafa : '#eee'}
background:  #eee;

还有类似的颜色。

但是这是多余的并且不是很优雅。我想要某种 if/else 语句:

background: ${ props => { 
  if (props.dark) { #454545 }
  elseif (props.light) { #fafafa }
  else { #eee }
}

但我不知道如何在样式组件中设置类似的内容。

有什么建议吗？

提前致谢。

Answer 1

保持传入的 prop 名称相同。然后您可以使用 switch/case 语句。例如，传入 color 属性并将其用作 type 来与 case 进行匹配。

工作示例:

<小时/>

例如:

<Button color="primary">Example</Button>

组件/按钮

import styled from "styled-components";

const handleColorType = color => {
  switch (color) {
    case "primary":
      return "#03a9f3";
    case "danger":
      return "#f56342";
    default:
      return "#fff";
  }
};

const Button = styled.button`
  display: block;
  cursor: pointer;
  border: 0;
  margin: 5px 0;
  background: #000;
  font-size: 20px;
  color: ${({ color }) => handleColorType(color)};

  &:focus {
    outline: 0;
  }
`;

export default Button;

<小时/>

如果您有多个属性(例如 color 和 background 对)，则利用与上面相同的概念，更改 handleColorType返回带有属性的字符串，并调用不样式属性的handleColorType函数。

例如:

<MultiButton color="primary">Example</MultiButton>

组件/MultiButton

import styled from "styled-components";

const handleColorType = color => {
  switch (color) {
    case "primary":
      return "color: #03a9f3; background: #000;";
    case "danger":
      return "color: #fff; background: #f56342;";
    default:
      return "color: #000; background: #eee;";
  }
};

const MultiButton = styled.button`
  display: block;
  margin: 5px 0;
  cursor: pointer;
  border: 0;
  font-size: 20px;
  ${({ color }) => handleColorType(color)};

  &:focus {
    outline: 0;
  }
`;

export default MultiButton;