Styled-Components：具有多个道具/状态的条件样式

Question

我似乎无法在 Google 上找到任何关于此的信息...很可能它就在那里，我只是没有用谷歌搜索正确的东西。我一直在寻找我已经为一个道具做了什么。

我目前有基于道具和状态的样式。他们按预期工作。但是我发现自己处于这样一种场景中，我需要一种风格，其中同时需要两个道具 (true/false) 才能获得所需的结果。

我想知道这是否可能？

以下作品：

${({ prop1 }) => !prop1 &&`
    // Some Styles when !prop1
`};

${({ prop2 }) => prop2 &&`
    // Some Styles when prop2
`};

我正在尝试做的事情类似于以下内容：

${({ prop1, prop2 }) => !prop1, prop2 &&`
    // Some Styles when !prop1 && prop2
`};

或

${({ prop1 && prop2 }) => !prop1 && prop2 &&`
    // Some Styles when !prop1 && prop2
`};

但这似乎行不通。我不认为我离得很远......也许我是？任何帮助都会很棒！

非常感谢。

Answer 1

你应该使用 css 方法来做条件判断

import styled, { css } from 'styled-components'

${({ prop1, prop2 }) => !prop1 && prop2 && css`
    // Some Styles when !prop1 && prop2
`};

注意语法上你正在解构函数中的 props。

({prop1 && prop2}) == 语法无效

Styled-Components: Conditional styling with multiple props / states