Global styles with Styled-Components

Asked

Viewed 38 times

0

How can I increment global styles in Styled-Components?

I have a file with several style variables, as I can increment in Styled-Components?

Example:

src/Styles/Colors.js

const ColorPrimary = "#000"

src/screens/login/Styles.js

import styled from 'styled-components/native';

const Container = styled.View``

How can I increment this Colorprimary inside the Container?

react-native styled-components

  • How so increment? You mean use within the style of Container?

  • Exactly that

  • Just pass as string template doesn’t work? Something like color: ${ ColorPrimary } within the styled.view.

1 answer

1

I believe that a satisfactory solution would be to create a Theme and use in Styles-Components.

So imagine you have a Heme like this

export default {
  colors: {
    primary: '#000',
  }
}

using the Styled Components theme, you will be able to access it like this

import styled from 'styled-components/native'

export const Container = styled.View`
  background: ${({ theme }) => theme.colors.primary;
`;

It’s pretty cool this approach, I usually add some very useful things like, colors, font family name and whatever else I find necessary.

At the end it’s kind of like this :)

export default {
  colors: {
    primary: '#000',
  },
  font: {
    family: {
      black: 'Poppins-Black',
      blackItalic: 'Poppins-BlackItalic',
      bold: 'Poppins-Bold',
      boldItalic: 'Poppins-BoldItalic',
      extraBold: 'Poppins-ExtraBold',
   },
   metrics: {
     window: {
      width,
      height,
     },
     statusBarHeight: Platform.select({
       android: 0,
       ios: getStatusBarHeight(),
       default: 0,
     }),
     bottomSpace: Platform.select({
       android: 0,
       ios: getBottomSpace(),
       default: 0,
     }),
    }
  }
}

Browser other questions tagged react-native styled-components

You are not signed in. Login or sign up in order to post.