react如何修改两个相同自定义组件其中一个的样式

Question

1.定义了一个组件

import React from 'react';
class Formlat extends React.Component{
    render (){
        return (
            <div>
                <h1>我爱我的祖国。。。</h1>
                <div className='user'>123456zxvsa</div>
            </div>
        )
    }
}
export default Formlat;

2.然后引用这个组件两次

import React, { Component } from 'react';
import './App.css';
import Formlat from './components/zujian';
import styles from './bbb.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        
        <Formlat></Formlat>
        <Formlat></Formlat>
      </div>
    );
  }
}
export default App;

3.页面显示是这样的

4.我定义了一个背景颜色

    .bbb{
    background-color: blue;
}

5.如何改，才能只给第一个组件加背景颜色呢？？？，我写的这个没有任何反应呀

return (
      <div className="App">
        <Formlat className={styles.bbb}></Formlat>
        <Formlat></Formlat>
      </div>
    );

Answer 1

Formlat组件可改写为如下：

import React from 'react';
class Formlat extends React.Component{
    render (){
        return (
            <div style={this.props.style}>
                ...
            </div>
        )
    }
}
export default Formlat;

使用方法：

<Formlat style={{background: 'blue'}} />
<Formlat />

你的代码是使用class的方式，思想是一样的，把传递style变成传递class就ok啦！