CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
user220409
user220409

Reputation: 184

material-ui@next without 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?

Upvotes: 1

Views: 4559

Answers (1)

nbkhope
nbkhope

Reputation: 7474

You can use Material UI without withStyle(), as described in their documentation.

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.

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.

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.

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';

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.

Upvotes: 7

Related Questions