如何在React中將單個樣式傳遞給組件？

Question

我多次渲染同一個組件，但我想給其中一個賦予不同的樣式。

我應該添加className嗎？ 如何傳遞樣式以更改此特定組件的字體大小？

   <Result
                className={Styles.reportTitle}
                question={report.question}
                text={report.resultText}
                values={[
                    {
                        percentageResult: report.overallPercentage,
                        value: report.overallPercentage,
                        resultText: report.resultText
                    }
                ]}
                color="black"
            />

添加className是我正在做的，但是沒有用。

Answer 1

在結果組件中，您可以設置一個樣式屬性來做到這一點：

export class Result extends React.Component {
   render () {
      return <div style={color: this.props.color}>...</div>
   }
}

或者您可以使用樣式化的組件

import styled from 'styled-components';

const Box = styled.div `
  color: ${color => color};
`

export class Result extends React.Component {
  render() {
    return <Box color={this.props.color}>...</Box>
    }
}

Answer 2

您的自定義組件（可能）沒有將className傳播到根元素。 在此處添加className={className} 。