How using a theme from a package in an React Application?

user_9484126 0
Viewed 178

I have two Reactprojects "student-app", which is the application and "student-app-copmponents, which is a package containing components used by the application. Many of components of the package uses a theme for the colors with styled-components. And when my application displays the components, theses colors don't appears.

So i tried to import the theme from the package and inject this theme in my app with the ThemeProvider of styled-components. But it doen't work either.

This is the code where i try to inject this theme.

...
import { theme } from '@xxx/student-app-components';
import { ThemeProvider } from 'styled-components';

....

export const Authenticated: VFC = () => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <div>{renderMainView()}</div>
      </ThemeProvider>
    </>
  );
};

Content of the theme file in the student-app-components project :

export const theme = {
  blue: 'rgb(2, 8, 135)',
  blue2: 'rgb(16, 0, 90)',
  spacing: spacing,
  radius: '15px',
  white: 'rgb(255, 255, 255)',
  mauve: 'rgb(229, 223, 255)',
  green: 'rgb(62, 248, 175)',
  green2: 'rgb(145, 255, 212)',
  yellow: 'rgb(255, 233, 181)',
  textSmall: '10px',
  textMiddle: '12px',
  textBig: '14px',
};

function spacing(x: number): string {
  return x * 5 + 'px';
}

Exemple of theme utilisation :

const Box = styled.div`
  background-color: ${(props) => props.theme.blue};
  border-radius: ${(props) => props.theme.radius};
  border-top-left-radius: 0;
  padding: 16px 20px 10px 34px;
  color: ${(props) => props.theme.white};
  margin-top: -11px;
`;

I tried to move the theme file locally in the app directory but it didn't work. So i wonder, what can i do or change to fix that ?

styled-components reactjs themes javascript
1 Answers

As i can see you are using typescript in your project. In this case you first need to initialize your default theme and then to connect via ThemeProvider. working example

theme.ts

import { DefaultTheme } from "styled-components";

function spacing(x: number): string {
  return x * 5 + "px";
}

export const theme: DefaultTheme = {
  blue: "rgb(2, 8, 135)",
  blue2: "rgb(16, 0, 90)",
  spacing: typeof spacing,
  radius: "15px",
  white: "rgb(255, 255, 255)",
  mauve: "rgb(229, 223, 255)",
  green: "rgb(62, 248, 175)",
  green2: "rgb(145, 255, 212)",
  yellow: "rgb(255, 233, 181)",
  textSmall: "10px",
  textMiddle: "12px",
  textBig: "14px"
};

App.tsx

import styled, { ThemeProvider } from "styled-components";
import { theme } from "../theme";

const Box = styled.div`
  background-color: ${(props) => props.theme.blue};
  border-radius: ${(props) => props.theme.radius};
  border-top-left-radius: 0;
  padding: 16px 20px 10px 34px;
  color: ${(props) => props.theme.white};
  margin-top: -11px;
`;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <h1>Styled-component</h1>
        <h2>How using a theme from a package in an React Application?</h2>
        <Box />
      </div>
    </ThemeProvider>
  );
}
user_155451160
Related