在 React 中，CSS 样式常常是以行内样式的形式定义。而由于不同浏览器的 CSS 兼容性问题，以及编写样式时的不规范等原因，可能会导致页面出现样式不一致的问题。为了解决这个问题，可以使用 NPM 包 react-style-normalizer。
什么是 react-style-normalizer？
react-style-normalizer 是一个 React 组件，它可以自动将 CSS 样式进行规范化和兼容化处理，从而确保所有浏览器都能正确地渲染样式。
如何安装 react-style-normalizer？
在命令行中执行以下命令即可安装：
npm install react-style-normalizer --save
如何使用 react-style-normalizer？
首先需要在项目中引入 react-style-normalizer：
import StyleNormalizer from 'react-style-normalizer';
然后在 React 组件中使用该组件：
<StyleNormalizer>
<div style={{ display: 'flex', justifyContent: 'center' }}>
Hello, World!
</div>
</StyleNormalizer>这里我们传入了一个 div 元素的 style 属性，其中定义了 display 和 justifyContent 两个样式属性。StyleNormalizer 组件会自动将这些样式进行规范化和兼容化处理，以确保每个浏览器都可以正确地渲染它。
react-style-normalizer 的指导意义
react-style-normalizer 不仅仅是一个可以解决样式兼容性问题的组件，更重要的是它提醒我们在编写 CSS 样式时需要遵循规范和规则，保证我们的 CSS 样式代码的可维护性、可读性和可扩展性。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- -------------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----------------
---- -------- -------- ------- --------------- -------- ---
------ ------
------
------------------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-style-normalizer