外链样式
- 将 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; }
但是如上的这种写法还是有弊端的，终归还是不推荐的方式，有隐形炸弹。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
