material-ui@next 没有 withStyles？答案

【问题标题】：material-ui@next without withStyles?material-ui@next 没有 withStyles？
【发布时间】：2017-12-23 11:30:48
【问题描述】：

我想在material-ui@next 上创建一个项目，但我不想使用withStyles。但是草稿TypeScript 里面的装饰器@withStyles 不想共存。所以问题来了——material-ui@next 可以不用withStyles 使用吗？

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

您可以在不使用 withStyle()、as described in their documentation 的情况下使用 Material UI。

如果您尝试将 className 添加到 Material UI 组件（假设样式像 import ./style.css 一样导入），默认情况下，由于 CSS 注入顺序，该样式可能会被 Material UI 样式覆盖。

如果您在浏览器中运行时查看应用程序 HTML 的 <head>，您可能会注意到您可能已导入的任何自定义 CSS 样式可能出现在任何 Material UI 样式之前。当他们这样做时，稍后定义的样式将优先并否定您的自定义样式。

解决此问题的一种方法是将 之类的HTML 注释添加到<head> 的底部，以便JSS（由Material UI 使用）知道在哪里正确注入<link> 标签。

这样，将您的应用组件包含在您的入口点 JavaScript 文件中的 JssProvider 中，如下所示：

<JssProvider jss={jss} generateClassName={generateClassName}>
  <YourAppGoesHere />
</JssProvider>

上面props中使用的变量是这样定义的：

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui-next/styles';

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
jss.options.insertionPoint = 'jss-insertion-point';

完成上述操作后，Material UI 样式将首先出现，然后是您的自定义样式。这样，您的自定义样式将始终优先于 Material UI 样式。

【讨论】：

对于那些使用 Create React App 的人，你需要 follow the "Other HTML Element" instructions here 这要求你设置一个 noscript 对象而不是注释——因为 CRA 会剥离 public/index.html 的 cmets——和稍微修改jss插入点实现。