SharedButton es el estilo base de un botón dentro de mi aplicación y se comparte entre los componentes. Estoy tratando de anular los estilos de este botón dentro de MyComponent .
Recibo el siguiente error cuando se monta myComponent : ReferenceError: Cannot access 'SharedButton' before initialization .
Tenga en cuenta que si no importo SharedButton desde un archivo diferente, es decir. si lo defino dentro de "MyComponent", no obtengo el error. ¿Cómo puedo solucionar este problema?
compartido.ts
import styled from "styled-components"; export const SharedButton = styled.button` border: 1px solid red; color: #1c101e; font-size: 14px; `;miComponente.ts
import { SharedButton } from "./shared"; import styled from "styled-components"; const MyComponentButton = styled(SharedButton)` float: right; `; const MyComponent = () => { return <MyComponentButton> TEST </MyComponentButton> }Intente colocar el estilo MyComponentButton en shared.ts y exporte a myComponent.ts . ejemplos de caja de arena
compartido.ts
import styled from "styled-components"; export const SharedButton = styled.button` border: 1px solid red; color: #1c101e; font-size: 14px; `; export const MyComponentButton = styled(SharedButton)` float: right; `;miComponente.ts
import { MyComponentButton } from "./shared"; const MyComponent = () => { return <MyComponentButton> TEST </MyComponentButton> }El segundo enfoque, poner algunos accesorios en componentes con estilo
compartido.ts
import styled, { css } from "styled-components"; export const SharedButton = styled.button` border: 1px solid red; color: #1c101e; font-size: 14px; ${({ floatRight }) => floatRight && css` float: left; `} `;miComponente.ts
import { SharedButton } from "./shared"; export const MyComponent = () => { return <SharedButton floatRight> TEST </SharedButton>; };