样式化组件：具有多个道具/状态的条件式样式

Question

我似乎无法在Google上找到关于此的任何信息……可能存在，而我只是在谷歌搜索不正确的东西。我一直在寻找自己已经为一个道具完成的工作。

我目前有基于道具和状态的样式。他们按预期工作。但是我发现自己处于一种需要使用两种风格（真/假）才能获得预期结果的样式。

我想知道这是否可能吗？

以下内容有效：

${({ 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
`};

从句法上注意，您正在破坏函数中的道具。

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