React导入样式时的优先级问题

优先级规则

结论先写在前面：React导入样式文件时，优先级由导入的顺序决定，后导入的样式优先级高于先导入的样式

举例验证

示例代码

# app.jsx
import React from 'react';
import TWO from './two.jsx'
import './App.css';

export default function App() {
    return (
        <div>
            <TWO />
        </div>
    )
}
# App.css
/*App.jsx 中导入的样式*/

.one {
  color: blue;
}

.two {
   color: blue;
 }

# one.jsx
import './one.css'
import React from 'react'
export default function ONE() {
    return (
        <div>
            <p className="one">one</p>
        </div>
    )
}

# one.css
/*one.jsx 中导入的样式*/

.one {
    color: green;
}

.two {
    color: green;
}

# two.jsx
import React from 'react'
import ONE from './one.jsx'
import './two.css'

export default function TWO() {
    return (
        <div>
            <ONE />
            <p className="two">two</p>
        </div>
    )
}

# two.css
/*two.jsx 中导入的样式*/

.one {
    color: red;
}

.two {
    color: red;
}

上面分别定义了三个组件， App， ONE, TWO， 并且App中引入了TWO， TWO中引入了ONE，分析上面的解析顺序可以得到，css文件导入的顺序依次是one.css 、 two.css 、 app.css, 因此最终页面显示为

如果我们将上述示例代码中引入样式文件的顺序改变

# 改动app.jsx
# 只改动此处的顺序
import './App.css';
import TWO from './two.jsx'

这样导入样式文件的顺序就变化为app.css 、one.css、 two.css，因此最终页面显示为

再在上一次改动的基础上做一下改动

# 改动two.jsx
# 只改动此处的顺序
import './two.css'
import ONE from './one.jsx'

这样导入样式文件的顺序又变化为app.css 、two.css 、one.css， 因此最终页面的显示为

看一下最后一次改动后网页中的DOM

可以看到，越先导入的样式出现在DOM中的位置越靠前，而在css的样式优先级规则中，同为页内样式时，后出现的样式会覆盖前面出现的样式即后出现的样式优先级高于前面出现的样式。

到此已经验证完毕，再次强调导入样式时的优先级为：React导入样式文件时，优先级由导入的顺序决定，后导入的样式优先级高于先导入的样式

同时因为样式可以被覆盖的原因，在写样式文件时尽量不要让样式产生冲突，以免发生意料之外的情况。