CODEWITHSUNDEEP
javascriptreactjs
mcfly24
mcfly24

Reputation: 64

More than one style as style prop in React component

I wonder if there is any possibility to have more than one style in React component e.g.

import React from 'react'

function App() {

 const styles = {
   styleOne: {
      color: 'red'
   },
   styleTwo: {
      fontSize: '2rem'
   }
 };

 return (
  <div style={styles.styleOne}>
    Lorem ipsum
  </div>
 );
}

I want div to have both styleOne and styleTwo styles. I have try to pass array of styles to style props, but its not working.

Upvotes: 0

Views: 47

Answers (1)

akhtarvahid
akhtarvahid

Reputation: 9769

Try this

export default function App() {

   const styles = {
     styleOne: {
        color: 'red'
     },
     styleTwo: {
        fontSize: '2rem'
     }
   };

   return (
    <div style={{...styles.styleOne, ...styles.styleTwo}}>
      Lorem ipsum
    </div>
   );
  }

Upvotes: 1

Related Questions