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 style={{background: 'blue'}} /><Formlat />

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