- 定义了一个组件
class Formlat extends React.Component{
render (){
return (
<div className={this.props.className}>
<h1>我爱我的祖国。。。</h1>
<div className='user'>123456zxvsa</div>
</div>
)
}
}
export default Formlat;
- 引用这个组件两次,并添加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;
- 设置第一个组件的样式
.ss{
h1{
background-color: blue;
}
}
.bbb{
background-color: aqua;
}
4.页面样式没有任何变化
怎么样修改才能对第一个组件的样式做更改呢???
h1上的样式信息生效了吗?
是不是你less没有成功加载?
用CSS试试能不能行,
我在我这边测试了你的代码是可以的,=。=,我觉得大概是你的less没有加载好