Styled-Components：具有多个 props/states 的条件样式

Question

我似乎在谷歌上找不到任何关于此的信息...很可能它就在那里，但我只是没有在谷歌上搜索正确的东西。我只是不断寻找我已经为一个道具所做的事情。

我目前有基于道具和状态的样式。它们按预期工作。但我发现自己处于这样一种情况：我需要一种同时需要两个道具（真/假）才能获得所需结果的样式。

我想知道这是否可能？

以下作品：

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