样式化组件内的 if 语句答案

【问题标题】：if statement inside styled component样式化组件内的 if 语句
【发布时间】：2018-09-19 14:25:57
【问题描述】：

export enum SizeEnum {
    Small,
    Large
}

export interface ICheckbox {
    Size: SizeEnum;
}

const Box = styled.div`
    height: 20px;
    width: 20px;
`

在上面的代码中，我希望能够根据 prop 有条件地更改<Box> 的高度和宽度值。我该怎么做呢？

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

您可以在 TypeScript 中添加界面，并为默认、小型和大型框使用布尔值。这个例子是为那些有两个以上选择的人准备的。如果有两种选择，我会使用箭头函数和? : 运算符。

interface Sizes { 
  small?: boolean, 
  large?: boolean 
}

// Box.
const Box = styled.div<Sizes>`
  // p in this case means parameter which can have small and large booleans
  height: ${p => 
    (p.small && '25px') ||
    (large && '100px') || 
    '50px'
  };

  width: ${({Size}) => 
    (small && '25px') || 
    (large && '100px') || 
    '50px'
  };

`

// Render.
<Box/> // 50px - Normal.
<Box small/> // 25px - Small.
<Box large/> // 100px - Large.

【讨论】：

【解决方案2】：

您可以像这样使用 elvis 运算符：

${(props) => props.someValue ? css` width: 20px;` : css` width: 100px; `}

希望这对研究如何在 React 样式组件中使用逻辑运算符的人有所帮助。

【讨论】：

【解决方案3】：

我们可以像jsx一样添加if-checks

const Box = styled.div`
    height:100px;
    width:100px;
    ${props => props.Size === 'Small' && `
         height:20px;
         width:20px;
    `}
`

注意：不需要包含css这个词

【讨论】：

你想要 css`` 用于语法高亮：|
在官方文档中，他们没有提到 css``。 styled-components.com/docs/basics#adapting-based-on-props

【解决方案4】：

另一种方法，如果你想添加几个 css 样式。

const Box = styled.div`
    height:100px;
    width:100px;
    ${props => props.Size === 'Small' && css`
         height:20px;
         width:20px;
    `}
`

【讨论】：

这些都是很好的答案，我想给你一个投票，因为就我在这里看到的三个例子而言，没有最好的方法来做到这一点

【解决方案5】：

请参阅Logical Operators 和Adapting based on props 了解更多信息。

// Box.
const Box = styled.div`

  height: ${({Size}) => 
    Size === 'Small' && '25px' ||
    Size === 'Large' && '100px' || 
    '50px'
  };

  width: ${({Size}) => 
    Size === 'Small' && '25px' || 
    Size === 'Large' && '100px' || 
    '50px'
  };

`

// Render.
<Box/> // 50px - Normal.
<Box Size="Small"/> // 25px - Small.
<Box Size="Large"/> // 100px - Large.

【讨论】：

当我这样做时，我得到一个打字稿错误[ts] Property 'Size' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>'.
这是一个TypeScript 问题。 This link might help.

【解决方案6】：

你可以使用三元运算符

const Box = styled.div`
height: ${props => props.Size === 'Small' ? '20px' : '40px'}
width: ${props => props.Size === 'Small' ? '20px' : '40px'}
`

参考：https://www.styled-components.com/docs/basics

【讨论】：

在 TypeScript 中抛出错误 [ts] Property 'Size' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>'
我对 typescript 不太了解，但你可以通过更改属性名称大小来尝试 --> deviceSize/ device-size
ZeroDarkThirty，要解决这个问题，您应该创建一个道具接口。 interface Props { Size: string } 你应该在元素上使用 const Box = styled.div` height: ${props => props.Size === 'Small' ？ '20px' : '40px'} 宽度: ${props => props.Size === 'Small' ? '20px' : '40px'} `