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 ?
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>
);
}