CSS styles not reflecting in reactapp

Question

I'm trying to create a button component in react js. I'm able to render the bootstrap classes. But, I need to override some css rules in bootstrap. for that I have created a styles variable. But, it's throwing error.

parent.js

 <Button   buttonType={TYPES.DANGER} label="Add To Cart" onClick={() => this.addItemToCart(pdpList.uniqueID)}></Button>

button.js

 import React from 'react';

 const styles ={
 background-color:  #EF3829 !important;
 color: #fff;
  border-radius: 0px !important;
 }

export const TYPES = {
 PRIMARY: 'btn-primary',
 WARNING: 'btn-warning',
 DANGER: 'btn-danger',
 SUCCESS: 'btn-success',
 }

  export const Button = (props) => (
   <button  
    onClick={props.onClick} 
      className={props.styles,[ props.buttonType || TYPES.PRIMARY] }
    >
   {props.label}
   </button>
 );

Can some please help me to troubleshoot this problem.

it's showing error what I have declared inside styles variable — Shaswati Bhattacharyya
– Shaswati Bhattacharyya, Commented Jan 7, 2019 at 8:14
Not sure if typo, but it looks like you're not using strings to define your styling in that styles variable. Also, injecting styles in React components is a bit different in syntax. — Cat_Enthusiast
– Cat_Enthusiast, Commented Jan 7, 2019 at 8:17
What was this line suppose to do? className={props.styles,[ props.buttonType || TYPES.PRIMARY] } This expression is equivalent to [ props.buttonType || TYPES.PRIMARY] (this is how comma operator works) making className an array of 1 element while it should be a string. — Yury Tarabanko
– Yury Tarabanko, Commented Jan 7, 2019 at 8:18

Cat_Enthusiast · Accepted Answer · 2019-01-07 09:01:24Z

2

Following-up, to inject styles in React components, you must treat your styles like a standard Javascript object. Each style needs a key and a value. For styles, the value is always a string.

 import React from 'react';

 const styles = {
    backgroundColor: "#EF3829",
    color: "#fff",
    borderRadius: "0px"
 }

export const TYPES = {
 PRIMARY: 'btn-primary',
 WARNING: 'btn-warning',
 DANGER: 'btn-danger',
 SUCCESS: 'btn-success',
 }

  export const Button = (props) => (
   <button  
      onClick={props.onClick} 
      style={styles}
      className={ props.buttonType || TYPES.PRIMARY }
    >
   {props.label}
   </button>
 );

edited Jan 7, 2019 at 9:01

answered Jan 7, 2019 at 8:23

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

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

2 Comments

Shaswati Bhattacharyya Over a year ago

Yes the styles error has gone. But, its not taking the styles. You can see right, I have declared the bootstrap variables like btn-primary etc. But, I want to override some properties to custom. So, how do I override it

Cat_Enthusiast Over a year ago

I just made an update. Realizing that you can't use important tags for inline-styles. Also the property is style, not styles. can you try that out.

Yan Huang · Accepted Answer · 2019-01-07 08:22:22Z

1

First

the styles object should be like this:

const styles ={
    background-color:  '#EF3829 !important'; // the value should be an object.. or a variable
    color: '#fff';
    border-radius: '0px !important';
}

Second

I think the className of a button should be a string.

If you want to add your own inline style, you can the style attribute like this.

answered Jan 7, 2019 at 8:22

Yan Huang

412 bronze badges

Collectives™ on Stack Overflow

CSS styles not reflecting in reactapp

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related