外链样式的优点:
外链样式的缺点:
state
中的状态新建 Home.js 组件:
import React from 'react';
import './Home.css'
class Home extends React.Component {
render() {
return (
<div id={'home'}>
<p>我是 Home 段落</p>
<a href={'https://www.cnblogs.com/yangbuyiya/'}>我是 Home 超链接</a>
</div>
)
}
}
export default Home;
新建 About.js 组件:
import React from 'react';
class About extends React.Component {
render() {
return (
<div>
<p>我是 About 段落</p>
<a href={'https://www.cnblogs.com/yangbuyiya/'}>我是 About 超链接</a>
</div>
)
}
}
export default About;
App.js:
import React from 'react';
import Home from './component/Home'
import About from './component/About'
class App extends React.Component {
render() {
return (
<div>
<Home/>
<About/>
</div>
);
}
}
export default App;
新建一个 Home.css:
p {
font-size: 50px;
color: red;
}
a {
color: yellow;
}
然后浏览器当中进行查看,发现 Home 与 About 当中的内容样式都是受到了改变,如果想要在 Home.css 当中更改的样式只是修改 Home.js 组件的内容的话可以在 Home 组件当中的父组件添加一个 id,然后在样式选择器前面添加这个 id 即可如下所示:
#home p {
font-size: 50px;
color: red;
}
#home a {
color: yellow;
}
但是如上的这种写法还是有弊端的,终归还是不推荐的方式,有隐形炸弹。
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。