Использование props.type с реагирующими стилевыми компонентами

Question

надеюсь, у тебя все хорошо. Я застрял в том, как использовать следующие реквизиты в моем компоненте.

const Container = styled.div`
    background-color: ${props =>
      ({
        primary: 'blue',
        danger: 'red',
        warning: 'yellow'
      })[props.type]
    }
`

, а затем в моем приложении я пытаюсь сделать следующее

...
<Container primary />
...

Но там нет изменения цвета фона. Я делаю что-то глупое. Заранее спасибо.

Answer 1

const Container = styled.div`
  /* Background color with inline if/else. 'white' color is a fallbak  */
  background: ${props => props.primary ? "blue" : props.danger ? "red" : props.warning ? "yellow" : "white"  };
  /* You can do the same with other properties */
  color: ${props => props.primary ? "white" : "#222"};
  
  /* More properties will be applied to all */
  font-size: 1em;
  height: 500px;
  padding: 0.25em 1em;
`;

const App = () => {
  return (
    <div className="App">
      <Container danger>Hello World!</Container>
    </div>
  )
}

ReactDOM.render( <App /> , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.js"></script>
<div id="root"></div>

См. Дополнительные примеры на styled-components Документы

Answer 2

Передача реквизита в компонент Styled работает точно так же, как в React. То, что вы делаете, передаете реквизит с именем primary, который имеет тип boolean.

. В вашем контейнере вы проверяете на type реквизит, которого нет, поэтому все, что вам нужно сделать, это пройти. type реквизит с любым из этих значений primary | danger | warning

Код:

<Container type="primary" />

Answer 3

Самое близкое решение к тому, что вы пытаетесь достичь, используя другое свойство, отличное от boolean:

// type = 'primary' / 'danger' / 'warning'
<Container type={type} />;

const TYPE = {
  primary: 'blue',
  danger: 'red',
  warning: 'yellow'
};

const Container = styled.div`
  background-color: ${({ type }) => TYPE[type]};
`;

Что касается вашего текущего кода, вы можете попробовать:

// Only `blue` or `red`
const Container = styled.div`
  background-color: ${({ primary }) => (primary ? 'blue' : 'red')};
`;