这是我在这里发表的第一篇文章;）我是编程世界的新手，所以请理解。
目前我正在学习React with material-ui，有一件事让我感到奇怪：
<div data-reactroot="" class="wafe" style="color: rgba(0, 0, 0, 0.870588); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; border-radius: 2px; display: inline-block; min-width: 88px; background-color: rgb(255, 255, 255);"><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: inherit; font-weight: inherit; transform: translate3d(0px, 0px, 0px); position: relative; height: 36px; line-height: 36px; width: 100%; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; text-align: center; background-color: rgb(0, 188, 212);"><div><div style="height: 36px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"><span style="position: relative; opacity: 1; font-size: 14px; letter-spacing: 0px; text-transform: uppercase; font-weight: 500; margin: 0px; padding-left: 16px; padding-right: 16px; color: rgb(255, 255, 255); -webkit-user-select: none;">Guzik</span></div></div></button></div>
它必须这样吗？有没有办法将这个样式移动到另一个文件/位置，或者只需要像React + material-ui那样？
问候！ 米甲
答案 0 :(得分：2)
Material-UI使用内联样式来提供最可预测的行为。 来自mui的组件有很多动画，它们由javascript控制。这些样式是从代码生成的。
您实际上是指哪种表现？数据加载中？渲染？
加载：JS，生成的样式获胜，因为如果你使用正确的构建工具，你将只获得所需的代码，而样式只是它的一小部分。
渲染：内联样式获胜，因为渲染器不需要将选择器映射到样式，使得级联到所有样式，它也必须解析。
内联样式的好处是巨大的。 CSS与JS的优点也很大。
如果您知道一些CSS框架，如Bootstrap，您知道，很多时候您必须使用包装器。就像容器，表格，面板等的包装一样。因为很难，甚至不可能用类来设置组件的样式，如果不了解上下文。所以框架教你创建包装器，它们只是愚蠢的div，但你需要它们将你想要的样式应用到内部部件。它是好的吗？这很简单吗？改变它怎么样？学习怎么样？
使用内联样式，它绝对更简单。如果出现问题，您只需要查看组件并在那里进行更改。
如果您使用JS对象来描述样式，则可以共享它并命名。命名和范围也会带来许多积极的副作用，您可以创建组件并在需要的地方使用它们，而不必担心类名，因为类名是全局的。
如果您使用两个不同的UI框架，它们通常对按钮使用相同的名称，btn，button，panel ..并且所有内容都存在于您的全局文档中。所以它更加怪异，然后使用显式组件的显式样式。
你应该查看这个非常好的演示文稿：