Why CSS is not applying correctly to button in react material web components?

Question

I am new to React, I have some confusion related to CSS styling related to rwmc components.

I am just rendering two Button components on web page by importing it from '@rmwc/button' package. I am following this tutorial

https://jamesmfriedman.github.io/rmwc/buttons

I have also imported material design for this component like

import '@material/button/dist/mdc.button.css';

Now I have two buttons on my screens, for one of the button component, I have mentioned className property. In that class button color is just getting red which is working fine but I am wondering here, besides changing color of button, all other css defined in mdc.button.css are just getting applied to this as well, I don't know why is it happening so, Is this a correct behavior.

I am asking this because I have read here that

https://jamesmfriedman.github.io/rmwc/styling-theming

All of the components have the material-components-web classNames on them and you can add your own which means you are changing main class.

Any help will be appreciated.

Code:

import React from 'react';
import ReactDOM from 'react-dom';

import { DrawerHeader } from '@rmwc/drawer';
import { Button, ButtonIcon } from '@rmwc/button';

import '@material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'

const MyComponent = props => (
  <div>
      <Button>Default</Button>
      <Button className="myDrawerHeader">Default2</Button>
  </div>
);

ReactDOM.render(<MyComponent />, document.getElementById('root'));

index.css

.myDrawerHeader {
      color: red !important;
 }

Output on the screen is coming this which I think is wrong. Why all other styles from .mdc are getting applied to second button, I have just changed color of it.

screen-output-now

Vishmi Money · Accepted Answer · 2019-01-29 20:32:17Z

1

I think the behavior here is correct. Both the buttons have material-components-web css className and what you are doing is, adding another class to it. You are not actually changing the main class, you are extending the css styles of the second button using another class.

It behaves underneath as,

 <button className="material-components-web">Default</button>
 <button className="material-components-web myDrawerHeader">Default2</button>

edited Jan 29, 2019 at 20:32

answered Jan 29, 2019 at 20:22

Vishmi Money

1441 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Parkash kumar Over a year ago

I think you are right here, I should mark you answer correct then. Thank you

duc mai · Accepted Answer · 2019-01-29 20:49:57Z

0

I agree with Vishmi Money, the behavior is expected. When looking at the source code of the lib you used, its appeared a comment for classname props, https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js

/** Additional className for the button */
className?: string

So I think the idea is beside default classes you can define your own class and if you want to override some default behaviors then you can write it in your own class.

answered Jan 29, 2019 at 20:49

duc mai

1,4222 gold badges11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Why CSS is not applying correctly to button in react material web components?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related