классы переключения стилевых компонентов

Question

this.state.checkBool равно true / false

Структура HTML, подобная этой, переключает class1 и class2

<div class='common class1'>
<div class='common class2'>

css выглядит как

common {
  display: block;
  background: grey;
}

.class1 {
  position: absolute;
  left: 1px;
  right: auto;
  top: 2px;
  background: blue;
}


.class2 {
  position: absolute;
  left: auto;
  top: 2px;
  right: 30px;
  background: yellow;
}

Стилизованный компонент

const Wrapper = styled.div`
  display: block;
  background: grey;

  // Should this part use props to check true or false?

  ${prosp => } 
`

Я застрял на том, как переключать классы

<Wrapper toggle={this.state.checkBool ? class1 :class2 }/>

Answer 1

Вы хотите сохранить весь CSS в styled.div и использовать реквизит toggle, чтобы решить, какой CSS следует использовать для компонента в зависимости от его значения.

Пример

const Wrapper = styled.div`
  display: block;
  background: grey;
  ${props => {
    if (props.toggle) {
      return `
        position: absolute;
        left: 1px;
        right: auto;
        top: 2px;
        background: blue;
      `;
    } else {
      return `
        position: absolute;
        left: auto;
        top: 2px;
        right: 30px;
        background: yellow;
      `;
    }
  }}
`;

class App extends React.Component {
  state = { checkBool: false };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ checkBool: true });
    }, 1000);
  }

  render() {
    return <Wrapper toggle={this.state.checkBool}> Foo </Wrapper>;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="root"></div>