代码之家 › 专栏 › 技术社区 › sebastianf182

在样式化组件中使用扩展运算符

styled-components react-native

1

sebastianf182 · 技术社区 · 7 年前

在React Native中是否可以将spread操作符与样式化组件一起使用?

我有这个组件:

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

但在我的主题中,我有一个对象,它同时包含了fontfamine和fontSize,我在整个应用程序中都重复使用。我想知道我是否可以做这样的事情,但目前它不起作用:

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

例如,在iOS中设置提升也很有用,因为我必须设置4种样式。

谢谢

1 回复 | 直到 6 年前

1

9

Pritish Vaidya 7 年前

你可以用 css helper function 生成特定的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
`

2

0

Jaisa Ram 6 年前

您也可以直接从插值函数返回对象,它们将被视为内联样式。

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

或

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

有关详细信息: reference

3

0

Serdar Mustafa 4 年前

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

// with theme
const GlobalStyles = css`
 fontFamily: ${ ({theme}) => theme.font };
 fontSize: ${ ({theme}) => theme.fontSizeSubtitle };
`

// Without theme using inherited props
const GlobalStyles = css`
 fontFamily: ${ ({font}) => font };
 fontSize: ${ ({fontSizeSubtitle}) => fontSizeSubtitle };
`

// if you wanted it to be conditional
const GlobalStyles = css`
 fontFamily: ${ ({font}) => font || 'roboto' };
 fontSize: ${ ({fontSizeSubtitle}) => fontSizeSubtitle || '14px' };
`

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

// same can also be done with regular styled components:
export const HeaderText = styled.p`
 fontSize: ${ ({fontSizeSubtitle}) => fontSizeSubtitle || '14px' };
`

// Useage would be in your component would be like:

import react from react;
import { HeaderText } from '../component/styles'

export const FooComponent = memo(({ destructuredProps }) => {


// some other code

return (

<>
<HeaderText className={fooClass} fontSize='18px'> Here's my sample text! </HeaderText>
<>

)});