Is it possible to use the spread operator with a styled component in React Native?

I have this component:

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

But lets say that in my theme, I have an object that has both the fontFamily and the fontSize, and I re use all over the app. I would like to be able to know if I can do something like this, which currently it is not working:

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

This would be useful too setting up elevation in iOS for example, since I have to setup 4 styles.

Thanks

Is it possible to use the spread operator with a styled component in React Native?

I have this component:

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

But lets say that in my theme, I have an object that has both the fontFamily and the fontSize, and I re use all over the app. I would like to be able to know if I can do something like this, which currently it is not working:

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

This would be useful too setting up elevation in iOS for example, since I have to setup 4 styles.

Thanks

• javascript
• react-native
• styled-components

4 Answers 4

You can use the css helper function to generate the specific css and return it as a template literal.

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
`

or conditionally as

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

In React.js you can use the spread operator override multiple styles

Here is a link to a code example

const StyledText = styled.div`
    /* Normal styles */
    color: blue,
    background-color: white,

    /* Fields to override with object from props */
    ${({ styleOverrides }) => ({ ...styleOverrides })}
`;

You can also return objects directly from interpolations function, and they'll be treated as inline styles.

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

or

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

for more details : reference

To expand on previous answers you can also do the following:

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>
<>

)});