material-ui @ next没有withStyles? [英] material-ui@next without withStyles?
问题描述
我想在material-ui@next上创建项目，但是我不想使用withStyles.但是装饰者@withStyles不想共存的草稿TypeScript，因此出现了一个问题-material-ui@next是否可以在不诉诸withStyles的情况下使用?
I want to make a project on material-ui@next, but I do not want to use withStyles. But the draft TypeScript in which the decorator @withStyles doesn't want to coexist.So the question arises - can the material-ui@next use without resorting to withStyles?
推荐答案
您可以使用不带withStyle()，如果尝试将className添加到Material UI组件(假设样式已导入为import ./style.css)，则默认情况下，由于CSS注入顺序，该样式可能会被Material UI样式覆盖.
If you try adding a className to a Material UI component (given that style is imported like import ./style.css), that style might get overridden by the Material UI style by default due to CSS injection order.
如果在运行时在浏览器中查看应用程序HTML的<head>，您可能会注意到您导入的任何自定义CSS样式可能会之前出现在任何Material UI样式之前.当它们这样做时，以后定义的样式将具有优先权，并否定您的自定义样式.
If you look at the <head> of your application HTML during run-time in the browser, you may notice any custom CSS styles you may have imported may appear before any Material UI styles. When they do, the later defined styles will take precedence and negate your custom ones.
一种解决方法是在<head>的底部添加HTML注释，例如<!-- jss-insertion-point -->，以便JSS(由Material UI使用)知道在哪里正确注入<link>标记.
One way to fix that is add an HTML comment like <!-- jss-insertion-point --> to the bottom of your <head> so that JSS (which is used by Material UI) knows where to properly inject the <link> tags.
这样，将您的应用程序组件封装在入口点JavaScript文件的JssProvider中，如下所示:
With that, enclose your app component in a JssProvider in your entry-point JavaScript file like so:
<JssProvider jss={jss} generateClassName={generateClassName}>
<YourAppGoesHere />
</JssProvider>
以上道具中使用的变量定义如下:
The variables used in the props above are defined as such:
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样式.
After doing the above, Material UI styles will come first, followed by your custom styles afterward. That way, your custom styles will always take precendence over the Material UI ones.
这篇关于material-ui @ next没有withStyles?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
