Использование оператора распространения в стилизованных компонентах - PullRequest
Новая
       9

Использование оператора распространения в стилизованных компонентах

0 голосов
/ 08 ноября 2018

Можно ли использовать оператор распространения со стилизованным компонентом в React Native?

У меня есть этот компонент: 

const StyledHeaderText = styled.Text`
fontFamily: ${props => props.theme.font};
fontSize: ${props => props.theme.fontSizeSubtitle};
color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor}
`;

Но допустим, что в моей теме у меня есть объект, в котором есть и fontFamily, и fontSize, и я снова использую его во всем приложении. Я хотел бы знать, могу ли я сделать что-то подобное, что в настоящее время не работает: 

const StyledHeaderText = styled.Text`
...${props => props.theme.fontHeader};
color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor}
`;

Это было бы полезно, например, для настройки высоты в iOS, поскольку мне нужно настроить 4 стиля.

Спасибо

1 Ответ

0 голосов
/ 08 ноября 2018

Вы можете использовать вспомогательную функцию css , чтобы сгенерировать конкретный CSS и вернуть его как литерал шаблона. 

import styled, {css} from 'styled-components/native'

const GlobalStyles = css`
 fontFamily: ${props => props.theme.font};
 fontSize: ${props => props.theme.fontSizeSubtitle};
`

const StyledHeaderText = styled.Text`
 ${GlobalStyles}
 // Other Styles
`

или условно как 

const StyledHeaderText = styled.Text`
 ${props => props.theme.fontHeader ? GlobalStyles : 'fontSize: 14'}
 // Other Styles
`
...