react组件样式的更改

Question

1. 定义了一个组件

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

1. 引用这个组件两次，并添加class来区分两个组件

import React, { Component } from 'react';
import './App.css';
import Formlat from './components/zujian';
import './bbb.less'
class App extends Component {
  render() {
    return (
      <div className="App">

        <div className='ss'>
          <Formlat className={'bbb'}></Formlat>
        </div>
        <Formlat></Formlat>
      </div>
    );
  }
}
export default App;

1. 设置第一个组件的样式

.ss{
    h1{
        background-color: blue;
    }
}

.bbb{
    background-color: aqua;
}

4.页面样式没有任何变化

怎么样修改才能对第一个组件的样式做更改呢？？？

Answer 1

h1上的样式信息生效了吗？
是不是你less没有成功加载？
用CSS试试能不能行，
我在我这边测试了你的代码是可以的，=。=，我觉得大概是你的less没有加载好