La partida de color de texto del cambio de componentes en base a la experiencia en Reaccionar / Gatsby / componentes de estilo

Question

La partida de color de texto del cambio de componentes en base a la experiencia en Reaccionar / Gatsby / componentes de estilo

votos

0

Hola gente espero poder conseguir un poco de ayuda.

Tengo un componente de la rúbrica, el color del texto estoy tomando de ThemeProvider del tema de la carpeta que tengo es asignado a azul ...

const Title = styled.h1`
  font-size: 2.5rem;
  text-transform: uppercase;
  display: block;
  font-weight: 700;
  letter-spacing: 0.1rem;
  margin-bottom: 1rem;
  line-height: 1.15;
  color: ${props => props.theme.colors.main}; <-BLUE COLOR->
`
const SubTitle = styled.h2`
  font-size: 2rem;
  margin: 0;
  color: ${props => props.theme.colors.text};
  font-weight: 400;
`

const Heading = ({ title, subtitle }) => {
  return (
    <HeadingWrapper>
      <Title>{title}</Title>
      <SubTitle>{subtitle}</SubTitle>
    </HeadingWrapper>
  )
}

El cuerpo tiene un fondo azul.

Tengo 3 secciones

Componente con fondo blanco Asignado

       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Un componente sin fondo asignado

       <Heading
            title=This section Title is NOT good cause I have the blue text color
            subtitle=Here I don't use background color, I have blue color from the body
          />

Y el primer componente Lo mismo con el fondo blanco asignado.

       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Estoy utilizando el Componente La partida en todas las secciones 3, pero en la sección media no puedo ver la causa del color de texto es azul y fondo azul ...

La forma de abordar este problema de tener un poco de color de texto dinámico basado en el fondo ???

literalmente, tengo un pedo cerebro y no puedo cosa ... Esperamos que puedan guiarme o me da un mejor enfoque.

reactjs gatsby styled-components

Publicado el 13/02/2020 a las 22:05
fuente por usuario Ratko Gjurichanin

En otros idiomas...

1 respuestas

emoore · Answer 1 · 2020-02-13 22:19

Usted podría intentar agregar una propiedad para determinar el estilo.

<Heading title="" subtitle="" textColor="blue" bgColor="green" /> `

Luego, en su componente aéreo:

const Bg = styled.div`
     background-color: {props.BkgColor}
     color: {props.FontColor}
     ...
`


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}