React-组件-外链样式
原创
外链样式
- 将 CSS 代码写到一个单独的 CSS 文件中, 在使用的时候导入进来
外链样式的优点：
- 编写简单, 有代码提示, 支持所有 CSS 语法
外链样式的缺点：
- 不可以动态获取当前
state中的状态 - 属于全局的 css，样式之间会相互影响
新建 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 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
