样式组件的多个props选项

IT技术 reactjs styled-components css-in-js
2021-04-07 01:05:24

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

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

background: #454545;
color: #fafafa;

而<Navbar light>应该相反：

background: #fafafa;
color: #454545;

但是，如果两个 prop 都没有使用，那么我想要一个默认的背景和文本颜色——比如说（为了演示目的），像这样：

background: #eee;
color: #333;

现在，我的问题是如何在 Styled Components 中进行设置。

我可以执行以下操作： 

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

但我不知道如何在 Styled Components 中设置类似的东西。

有什么建议？

提前致谢。

6个回答

保持传入的prop名称相同。然后你可以使用一个switch/case语句。例如，传入一个colorprop 并将其用作 atype来匹配 a 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;

如果您有多个属性（如 acolor和一background对），则利用与上述相同的概念，将 更改handleColorType为返回string带有属性的 a 并调用没有样式属性的handleColorType函数。

例如：

<MultiButton color="primary">Example</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;
但是，如果那是您绝对想要的，那么是的，您需要添加的只是一个return声明。
2021-05-25 01:05:24
只是迷恋这种方法。一位前同事向我介绍了这一点，它比我使用的任何其他方法都要优雅得多。
2021-05-31 01:05:24
这是非常好的和优雅的（有时我肯定会使用它）。然而，我也想用于当我的溶液不希望传递一个值到道具（如暗和亮的例子我上面得到）。我可以修改您的解决方案，因为使用 if/else 语句来检查是否设置了道具 - 即，类似if (props.dark) { return 'background-color: #454545; color: #fafafa' } elseif.... 那行得通吗？
2021-06-08 01:05:24
该default的switch/case回报的东西（或者可以没有），如果案件的无匹配。请参阅代码和框示例。此外，再次保持相同的道具名称。使用 props 中传递的“dark”和“light”将迫使您使用嵌套严重的if/else语句。
2021-06-11 01:05:24
或者，或者 - 是否可以将 switch 与 props 一起使用，然后检查不同类型的 props。像这样： switch (props) { case props.dark...？我正在尝试使其正常工作，但出现错误。有任何想法吗？
2021-06-20 01:05:24

这是我最终使用的解决方案：

export const Navbar = styled.nav`
  width: 100%;

  ...  // rest of the regular CSS code

  ${props => {
    if (props.dark) {
      return `
        background: ${colors.dark};
        color: ${colors.light};
    `
    } else if (props.light) {
      return `
        background: ${colors.light};
        color: ${colors.dark};
    `
    } else {
      return `
        background: ${colors.light};
        color: ${colors.dark};
    `
    }
  }}
`
这就是我一直在寻找的东西。
2021-05-23 01:05:24

更优雅（我猜）和现代的东西是解构props和使用 switch 语句的组合，例如：

const Button = styled.button`
  ${({primary, secondary}) => {
      switch(true) {
        case primary:
          return `background-color : green`
        case secondary:
          return `background-color : red`
      }
    }
  }
`

样式化组件还接受一个函数，您可以在其中读取props。此外，如果您选择传递主题props，您还可以为您的主题定义一个对象。


const themes = {
  dark: css `
     background: ${colors.dark};
     color: ${colors.light};
  `,
  light: css`
     background: ${colors.light};
     color: ${colors.dark};
  `
}
export const Navbar = styled.nav(({theme})=>`
  width: 100%;
  background: ${colors.light};
  color: ${colors.dark};
  ... // rest of the css

  ${theme?themes[theme]:''}

  `)

<Navbar theme="dark" />

你也可以做这样的事情：


 const colorType= {
   dark: '#454545',
   light: '#0a0a0a',
   normal: '#dedede'
};



export const Navbar= styled.nav`
   background: ${({color}) => colorType[color] || `${color}`};

`;

你在这里：

<Navbar color="primary" />
<Navbar color="#FFFFFF" />
其它你可能感兴趣的问题
上一篇选择文本并突出显示选择或获取选择值（react） 下一篇使用 React Router v4 的多个布局