Как я могу использовать несколько реквизитов в одном обратном вызове, определенном в литерале шаблона в React styled-components - PullRequest
Новая
       66

Как я могу использовать несколько реквизитов в одном обратном вызове, определенном в литерале шаблона в React styled-components

1 голос
/ 02 мая 2020

Я начал использовать стилизованные компоненты в своем проекте React пару дней назад, и я не могу использовать несколько опор для определенных стилей в моих компонентах. Суть проблемы выглядит следующим образом: 


const sizes = {
   lg: css`
        width: 200px;
        height: 120px;
        font-size: 22px;
    `,
    md: css`
        width: 140px;
        height: 80px;
        font-size: 18px;
    `
}
const getColor = (color)=>css`color: ${color}`

const MyComponent = styled.div`
 max-width: 240px;
 font-size: 12px;
 color: '#ffffff';
 ${props=>getColor(props.color)}
 ${props=>sizes[props.size]}
`
....

<MyComponent color="blue" size="lg" ></MyComponent>

Проблема в том, что каждый раз, когда мне нужно добавить дополнительную конфигурацию (например, цвет и размер) для моего компонента, мне придется добавить еще один обратный вызов в шаблонный литерал.

Есть ли способ применить все с помощью одной строки кода и не добавлять отдельные обратные вызовы?

1 Ответ

2 голосов
/ 02 мая 2020
Стиль

также принимает функцию, которая передает реквизиты: 

const MyComponent = styled.div(({color, size}) => `
 max-width: 240px;
 font-size: 12px;
 color: ${color ? color : '#ffffff'};
 `${sizes[size]}`
`

Я использую деструктуризацию, но вы можете оставить ее как props, если хотите.

...