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
`};

обратите внимание на то, что вы деструктурируете реквизиты в своей функции.

({prop1 && prop2}) == неверный синтаксис