Breaking News: Grepper is joining You.com. Read the official announcement!

How To Use Multiple Styles in REACT

Add Answer

Anatu Green answered on January 12, 2021 Popularity 9/10 Helpfulness 2/10

answer How To Use Multiple Styles in REACT

related multiple css classes in react

related how to add multiple style attributes in react element

related apply multiple style objects in react js

How To Use Multiple Styles in REACT

Comment

//Using multiple styling in React is slightly different from React Native.
//First you have to create the styling object variables and then you use spread operator to call the styles in  the element you wish to style
//Below is an example. And you can make the style variables be global. This works in class components too.

const Header = (props) => {
  let baseStyle = {
    color: 'red',
  }

  let enhancedStyle = {
    fontSize: '38px'
  }

  return(
    <h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
  );
}

//You can also use this  method to add inline style, eg:
 containerStyle={{
            ...sharedStyles,
            backgroundImage: `url(${background1})`
          }}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript styles

Link to this answer
Share Copy Link

Contributed on Jun 25 2022

Anatu Green

0 Answers Avg Quality 2/10

Closely Related Answers

multiple css classes in react

Comment

//one class from props and second from custom css class
className={`${classes.container} custom_container`}

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 03 2022

Zia Ullah Sarwar

0 Answers Avg Quality 2/10

how to add multiple style attributes in react element

Comment

style is just an Object, with css value turn to camelCase, so you could use any way to merge two object, and it should work.

ES6: style={Object.assign({}, style1, style2)}

ES7: style={{...style1, ...style2}}

lodash: style={_.merge({}, style1, style2)}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Jan 12 2021

Kami

0 Answers Avg Quality 2/10

apply multiple style objects in react js

Comment

// REACT JS STYLING - Snippet 1

//--- Use belowe methods ---
ES6: style={Object.assign({}, style1, style2)}
ES7: style={{...style1, ...style2}}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: apply appl

Link to this answer
Share Copy Link

Contributed on May 31 2022

Mr. Copy Paster

0 Answers Avg Quality 2/10

How To Use Multiple Styles in REACT

Contents

More Related Answers

How To Use Multiple Styles in REACT

Closely Related Answers

multiple css classes in react

how to add multiple style attributes in react element

apply multiple style objects in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.