Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

How To Use Multiple Styles in REACT

//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})`
          }}
Source by stackoverflow.com #
 
PREVIOUS NEXT
Tagged: #How #To #Use #Multiple #Styles #REACT
ADD COMMENT
Topic
Name
2+9 =