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&nbsp;style={{background:&nbsp;'blue'}}&nbsp;/><Formlat&nbsp;/>你的代码是使用class的方式，思想是一样的，把传递style变成传递class就ok啦！