react组件样式的更改

  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.页面样式没有任何变化
图片描述

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

阅读 6.4k
1 个回答

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

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题