Tengo dos Reactprojects "student-app", que es la aplicación y "student-app-compponents", que es un paquete que contiene componentes utilizados por la aplicación. Muchos de los componentes del paquete usan un tema para los colores con componentes con estilo. Y cuando mi aplicación muestra los componentes, estos colores no aparecen.
Así que traté de importar el tema del paquete e inyectar este tema en mi aplicación con ThemeProvider de componentes con estilo. Pero tampoco funciona.
Este es el código donde trato de inyectar este tema.
... import { theme } from '@xxx/student-app-components'; import { ThemeProvider } from 'styled-components'; .... export const Authenticated: VFC = () => { return ( <> <ThemeProvider theme={theme}> <div>{renderMainView()}</div> </ThemeProvider> </> ); };Contenido del archivo de tema en el proyecto Student-App-Components:
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'; }Ejemplo de utilización del tema:
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; `;Traté de mover el archivo del tema localmente en el directorio de la aplicación, pero no funcionó. Así que me pregunto, ¿qué puedo hacer o cambiar para arreglar eso?
Como puedo ver, está utilizando mecanografiado en su proyecto. En este caso, primero debe inicializar su tema predeterminado y luego conectarse a través de ThemeProvider . ejemplo de trabajo
tema.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" };Aplicación.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> ); }