Произвольное внедрение стилей с помощью styled-компонентов - PullRequest
Новая
       56

Произвольное внедрение стилей с помощью styled-компонентов

0 голосов
/ 17 октября 2019

Я заполняю сетку различными элементами управления (в этом примере: счетчик вверх-вниз и текстовое поле).

В настоящее время я внедряю стили в элемент cls (в этом примереНапример, wide-input и narrow-input): 

render(): ReactNode {
    const input: CellItem[] = [
        { isUpdown: false, cls: 'wide-input' },
        { isUpdown: true, cls: 'narrow-input' },
    ];

    return (
        <GridContainer>
            input.map(content, index): ReactNode => {
                return (
                    content.isUpdown ?
                        <StyledUpdownCell className={content.cls} /> :
                        <StyledTextBoxCell className={content.cls} /> :
                )               
            }
        </GridContainer>
    );
}

Мой вопрос: как правильно сделать это, используя styled-components ?

есть способ внедрить любой произвольный стиль (content.cls в этом примере, но завтра это может быть также установка пользовательского цвета границы, например)

1 Ответ

0 голосов
/ 17 октября 2019

Используя стилизованные компоненты, вы можете получить доступ к реквизитам , передаваемым в пользовательский стилизованный компонент.

Таким образом, вы можете создать различные реквизиты «тем», которые вы передадите в StyledUpdownCell, а затем получите доступ к тем внутри стилей компонентов. Например, 

const StyledUpdownCell = styled.div`
   border-color: ${props => props.warningTheme ? 'red' : 'black'};
`

используется: 

<StyledUpdownCell warningTheme />

Вы также можете передавать реквизиты напрямую, но по умолчанию, например, 

const StyledUpdownCell = styled.div`
   border-color: ${props => props.borderColor || 'black'};
`

: 

<StyledUpdownCell borderColor="violet" />

Это действительно зависит от вас и от того, как вы хотите разработать API своего компонента.

Примечание: я нашел эту маленькую библиотеку полезной для создания компонентов, которые имеют много разных реквизитов: https://github.com/yldio/styled-is

...