styled-components global css variables

Using Javascript Variables with styled-components

stackoverflow.com › questions › 43502813 › using-javascript-variables-with-styled-components

I eventually figured this out, so here's how you can do it, at least if using React.

You need to define the variables in one file and export them.

// Variables.js

export const FONTSIZE_5 = '20px';

Then you need to import those variables into each component file.

// Button.js

import * as palette from './Variables.js';

Then you can use the variables in your styled-components like this:

const Button = styled.button`
  font-size: ${palette.FONTSIZE_5};
`;

Answer from colmtuite on Stack Overflow

styled-components

styled-components.com › docs › advanced

styled-components

In the above example the styled component class takes precedence over the global class, since styled-components injects its styles during runtime at the end of the <head> by default. Thus its styles win over other single classname selectors. One solution is to bump up the specificity of the selectors in your stylesheet: /* my-component.css */ .red-bg.red-bg { background-color: red; }

Stack Overflow

stackoverflow.com › questions › 43502813 › using-javascript-variables-with-styled-components

Using Javascript Variables with styled-components - Stack Overflow

Top answer

1 of 3

I eventually figured this out, so here's how you can do it, at least if using React.

You need to define the variables in one file and export them.

// Variables.js

export const FONTSIZE_5 = '20px';

Then you need to import those variables into each component file.

// Button.js

import * as palette from './Variables.js';

Then you can use the variables in your styled-components like this:

const Button = styled.button`
  font-size: ${palette.FONTSIZE_5};
`;

2 of 3

Wrapping a <ThemeProvider> around your application may help:

https://www.styled-components.com/docs/advanced#theming

const theme = {
  fontColour: 'purple'
}

render() {
  return (
    <ThemeProvider theme={theme}>
      <MyApplication />
    </ThemeProvider>
  )
}

That will give all child styled-components access to the theme like so:

const MyApplication = styled.section`
  color: ${props => props.theme.fontColour}
`

const MyFancyButton = styled.button`
  background: ${props => props.theme.fontColour}
`

Or access the theme via https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components

Discussions

Using CSS variable with styled-components - Stack Overflow

Clearly defining variables on the ... want global variables, but more local, per page/area/component, so you need to structure you code taking that into account. The real power of CSS variables is in their inheritance (unlike SCSS variables which are injected/replaces during the build-process). The power of styled-components ... More on stackoverflow.com

stackoverflow.com

reactjs - Migrating to Styled-Components with global SASS variables in React - Stack Overflow

Pardon me if this is an old question but I thought I chip in on how I use CSS variables for both my .scss and styled-components when the need arises. More on stackoverflow.com

stackoverflow.com

reactjs - How to use external css variables in styled-components? - Stack Overflow

I have CSS variables in separate file and I want to use them inside styled-components. It is not working as expected. More on stackoverflow.com

stackoverflow.com

Styled Components: Global Colors Style Sheet

I'm using styled components in my app. I wanna make a global style sheet to hold all my color variables. More on stackoverflow.com

stackoverflow.com

Videos