Создать новый компонент и наследовать стили от styled-component - PullRequest
Новая
       15

Создать новый компонент и наследовать стили от styled-component

1 голос
/ 30 апреля 2019 
const Button = styled.button`
  display: inline-block;
  width: 300px;
  background-color: black;
`    

const ButtonHref = styled.a`
  ${Button}
`

Итак, у меня есть два стилевых компонента.Я хочу наследовать стили «кнопки», но создать еще один тег.Я использую реакцию-эмоцию.Как я могу это сделать?

1 Ответ

1 голос
/ 16 мая 2019

Здесь есть несколько вариантов: использование композиции, стилизованных компонентов или реквизита. Второй вариант, вероятно, то, что вы хотите, но я также предоставил два других варианта.

1. Использование композиции 

const baseButton = css`
  color: white;
  background-color: black;
`

const fancyButton = css`
  background-color: red;
`

render() {

  return (
    <div>
      <button css={baseButton}></button>
     <button css={[baseButton, fancyButton]}></button>
    </div>
  )
}

Вторая кнопка будет иметь стили baseButton и specialButton.

Или ... 

const baseButton = css`
 color: white;
 background-color: black;
`

const fancyButton = css`
 ${baseButton};
 background-color: red;
`

render() {
 return (
   <div>
     <button css={baseButton}></button>
     <button css={fancyButton}></button>
   </div>
 )
}

2. Использование стилизованных компонентов 

const Button = styled.button`
  color: white;
  background-color: black;
`
const Fancy = styled(Button)`
  background-color: red;
`

render() {
  return (
    <div>
      <Button>Button</Button>
      <Fancy>Fancy</Fancy>
    </div>
  )
}

Это работает для любого компонента, который принимает className prop, что button делает.

3. Использование props

  const Button = styled.button`
    color: white;
    background-color: ${props => props.fancy ? 'red' : 'black'};
  `

  render() {
    return (
      <div>
        <Button>Button</Button>
        <Button fancy>Fancy</Button>
      </div>
    )
  )
...