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>
   }
}

或者您可以使用styled-components

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}。

如何在React中将单个样式传递给组件？

2 个答案: