javascript - Issue using multiple styles with Material-ui and Radium - Stack Overflow

admin管理员组

文章数量:1389754

I am trying to bine Radium and Material-ui. When I try to apply multiple styles on a single Material-ui ponent, no style is applied. So, for example, something like this produces no styling applied:

<MenuItem style={[styles.styleOne, styles.styleTwo]} >

Of course, if I do something like:

<MenuItem style={Object.assign({}, styles.styleOne, styles.styleTwo)} >

it works. Is there some way around it or this is the only way to use Radium for bining styles for a Material-ui ponent? And just to mention, Radium is properly set up, because applying array of styles on, for example, DIV element or works properly. Also, I am open to any suggestion about styling a React project that uses Material-ui library. Thanks!

I am trying to bine Radium and Material-ui. When I try to apply multiple styles on a single Material-ui ponent, no style is applied. So, for example, something like this produces no styling applied:

<MenuItem style={[styles.styleOne, styles.styleTwo]} >

Of course, if I do something like:

<MenuItem style={Object.assign({}, styles.styleOne, styles.styleTwo)} >

it works. Is there some way around it or this is the only way to use Radium for bining styles for a Material-ui ponent? And just to mention, Radium is properly set up, because applying array of styles on, for example, DIV element or works properly. Also, I am open to any suggestion about styling a React project that uses Material-ui library. Thanks!

• javascript
• reactjs
• material-ui
• radium

Share Improve this question Follow edited Oct 31, 2019 at 11:05 Wang Liang 4,44477 gold badges2626 silver badges5050 bronze badges asked Jun 15, 2016 at 7:58 Nenad RakićNenad Rakić 7111 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

For material-ui ponents in react, we add styles using the className. If i have to add multiple styles in a material ponent then below are the methods:

Example 1:

<div className={`${style1} ${style2}`}>

Example 2:

import classNames from 'classnames';
<div className={classNames(classes.style1, classes.style2)} />

Specifically for your case (Radium): What it's doing is merging 2 objects (style1 and style2) into a new anonymous object {} which is what you need to do.

You'll want to be careful when doing this however as you'll need to consider how you merge if both objects define the same key e.g. if style1 and style2 both define a height which do you use?

There's a long list of possible ways to do this on this stackoverflow thread http://stackoverflow./questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically depending on the libraries you're using and your use case they each have their own pros and cons.

Instead of adding classnames, you can also use the clsx module that es with Material UI and bine your style classes.

{/* using arrays */}
<MyComponent classes={clsx([classes.text, classes.title])} />
{/* using conditions */}
<div className={clsx(classes.root, {
  [classes.base]: true,
  [classes.closed]: !open,
  [classes.open]: open
})]>
  {props.children}
</div>

The Material UI Mini Variant Drawer example does a great job showing this module off.

Check out this fiddle: https://jsfiddle/Lxh5x2qr/

It uses the JSX spread (...) operator, which is a bit nicer syntax:

styleOne: {
  background: 'blue',
  color: 'red'
},

styleTwo: {
  background: 'green'
},

... style={{...this.styleOne, ...this.styleTwo}} ...

Please notice the the order of object does matter, just like in Object.assign.

We should not forget that MenuItem is not a DOM element, so when we apply style to it, material-ui manipulates it before applying it to the underlying element, and probably this is the reason why using an array does not work.

本文标签： javascriptIssue using multiple styles with Materialui and RadiumStack Overflow