reactjs - Styled-Components:具有多个 Prop /状态的条件样式

Question

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

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

我想知道这是否可能？

以下作品:

${({ 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}) == 语法无效