如何根据状态更改样式化组件

Question

我正在使用样式化组件来样式化我的react应用程序。我想根据我选择的内容更改文本颜色。我已经尝试传递状态，但我没有看到我的更改被使用。只能使用道具更新吗？我环顾了一下文档，但变得更加困惑。我决定发布整个组件。抱歉，如果你不应该这样做。

import React, {useState} from 'react'

import { pulse, flash} from 'react-animations'
import styled, { keyframes } from 'styled-components';
import Scan from './Components/Scan'
import Broke from './Components/Broke/Broke'
import Return from './Components/Return/Return'
import Forgot from './Components/Forgot/Forgot'
import { Button } from 'reactstrap';




const StartText =  styled.h1`
  font-size: 3em;


`
const Wrapper = styled.div `
  display: flex;
  justify-content: center;
`

const BrokeReason = styled.div `
  margin-top: 15px;

  margin-right: 5px;
  margin-left: 3px;
  border: solid #292b2c 2px;
  border-radius: 3px;
  background-color: #0275d8;
  font-size: 1.5em;
  padding: 5px;
  cursor: pointer;
  color: ${reason => reason.broke ? 'white' : 'red'}


`
const TotalWrap = styled.div `


`
const HeaderContainer = styled.div `
  display: flex;
  justify-content: center;
 
`
function App() {

const [reason, setReason] = useState({
    broke: false,
    forgot: false,
    return: false
})

const click = (event) => {
 
  if(event.currentTarget.textContent === 'I Broke My Chromebook'){

      setReason({...reason, broke: !reason.broke })
  } else if (event.currentTarget.textContent === 'I am returning my chromebook') {
    setReason({...reason, return: !reason.return })
  }else {
    setReason({...reason, forgot: !reason.forgot })
  }


}

  return (
    <TotalWrap>
    
      <HeaderContainer>
      <h1>Select your problem</h1>
      </HeaderContainer>
    <Wrapper>
    <BrokeReason onClick={click}>I Broke My Chromebook</BrokeReason>
    <BrokeReason onClick={click}>I am returning my chromebook</BrokeReason>
    <BrokeReason onClick={click}>I Forgot my chromebook</BrokeReason>
    </Wrapper>
    {/* <Scan /> */}
    {reason.broke ? <Broke  style={{backgroundColor: 'red'}}    /> : null || reason.return ? <Return /> : null || reason.forgot ? <Forgot /> : null}
  

    </TotalWrap>
  );
}

export default App;

Answer 1

样式化组件使用字符串插值(模板、文字)和函数，该函数将组件的属性作为第一个参数。所以，你可以这样做，

const BrokeReason = styled.div `
  margin-top: 15px;
  margin-right: 5px;
  margin-left: 3px;
  border: solid #292b2c 2px;
  border-radius: 3px;
  background-color: #0275d8;
  font-size: 1.5em;
  padding: 5px;
  cursor: pointer;
  color: ${props => props.broke ? 'white' : 'red'}
`

然后将broke值传递给属性，

<BrokeReason broke={reason.broke}>