What is the best way to store colors and fonts to reuse in a React.js app

JavaScript
1

I want to store names for colors and fonts in React using CSS not SASS.
For example this can be done in React native:

export const Gray = '#999999';
export const DarkerGray = '#4d4c4c';
export const DarkGray = '#747272';

How can this be achieved in React?

2

Well, you would just store them in variables if you need them in JS. How you handle those variables would be dependant on what you’re doing with them. ie: component level, state, store, config file, etc.

The 2 biggest ways of using CSS in React apps are with CSS Modules (I’m a big fan of these) and Styled Components (not a fan).

I have had a good bit of success using CSS Variables with PostCSS-CSSNext. CSSNext isn’t quite as good as SASS, but it’s pretty damn close and is based on emerging standards instead of 3rd party implementation. This mixes well with CSS Modules.

http://cssnext.io

1 Like
3

Thanks mawburn,
I want to create the variables in a js file and use them in a CSS file.
I am just styling the components. How would I import the variables to the CSS file? Can I import the whole file or do i have to import each variable individually?

4

If you’re using CSS4 variables without transpiling them to CSS3, then you can use setProperty.

Otherwise, you can’t. If you’re doing this a lot, then you need to put the CSS in the JS via Styled Components or some other method.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.