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/BNTang/'}>我是 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/BNTang/'}>我是 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;
}

但是如上的这种写法还是有弊端的，终归还是不推荐的方式，有隐形炸弹。