How to combine multiple inline style objects

Question

In React you can clearly create an object and assign it as an inline style  i e   mentioned below    var divStyle       color   white     backgroundImage   url     imgUrl          WebkitTransition   all      note the capital  W  here   msTransition   all      ms  is the only lowercase vendor prefix     var divStyle2    fontSize   18px     React render  lt div style  divStyle  gt Hello World  lt  div gt   mountNode     How can I combine multiple objects and assign them together

User · Answer

Ways of inline styling    lt View style   styles red   fontSize  25    gt     lt Text gt Hello World lt  Text gt   lt  View gt    lt View style   styles red  styles blue   gt     lt Text gt Hello World lt  Text gt   lt  View gt      lt View style   fontSize 10 marginTop 10   gt     lt Text gt Hello World lt  Text gt   lt  View gt

User · Answer

For ones that looking this solution in React  If you want to use the spread operator inside style  you should use  babel-plugin-transform-object-rest-spread   Install it by npm module and configure your  babelrc as such        presets     env    react       plugins     transform-object-rest-spread       Then you can use like     const sizing     width  200  height  200     lt div    className  dragon-avatar-image-background     style    backgroundColor  blue     sizing        gt    More info  https   babeljs io docs en babel-plugin-transform-object-rest-spread

User · Answer

Unlike React Native  we cannot pass array of styles in React  like   lt View style   style1  style2     gt    In React  we need to create the single object of styles before passing it to style property  Like   const Header    props    gt      let baseStyle         color   red          let enhancedStyle         fontSize   38px         return       lt h1 style      baseStyle     enhancedStyle   gt  props title  lt  h1 gt           We have used ES6 Spread operator to combine two styles  You can also use Object assign   as well for the same purpose   This also works if you don t need to store your style in a var   lt Segment style      segmentStyle      height  100      gt      Your content  lt  Segment gt

User · Answer

So basically I m looking at this in the wrong way   From what I see  this is not a React specific question  more of a JavaScript question in how do I combine two JavaScript objects together  without clobbering similarly named properties       In this StackOverflow answer it explains it   How can I merge properties of two JavaScript objects dynamically   In jQuery I can use the extend method

User · Answer

You can do this with Object assign    In your example  you would do  ReactDOM render       lt div style  Object assign divStyle  divStyle2   gt          Hello World       lt  div gt       mountNode     That will merge the two styles  The second style will replace the first if there are matching properties  As Brandon noted  you should use Object assign     divStyle  divStyle2  if you want to reuse divStyle without the fontSize applied to it  I like to use this to make components with default properties  For example  here s a little stateless component with a default margin-right  const DivWithDefaults      style  children     otherProps      gt       lt div style  Object assign   marginRight   quot 1 5em quot     style       otherProps  gt           children       lt  div gt    So we can render something like this   lt DivWithDefaults gt      Some text   lt  DivWithDefaults gt   lt DivWithDefaults className  quot someClass quot  style    width   quot 50  quot     gt      Some more text   lt  DivWithDefaults gt   lt DivWithDefaults id  quot someID quot  style    marginRight   quot 10px quot   height   quot 20px quot     gt      Even more text   lt  DivWithDefaults gt   Which will give us the result   lt div style  quot margin-right 1 5em  quot  gt Some text  lt  div gt   lt div style  quot margin-right 1 5em width50   quot  class  quot someClass quot  gt Some more text  lt  div gt   lt div style  quot margin-right 10px height 20px  quot  id  quot someID quot  gt Even more text  lt  div gt

User · Answer

To have multiple Inline styles in React   lt div onClick  eleTemplate  style    width    50    textAlign   center     gt

User · Answer

Actually  there is a formal way to combine and it is like below    lt View style   style01  style02     gt    But  there is a small issue  if one of them is passed by the parent component and it was created by a combined formal way we have a big problem      The passing style02 from props   parentStyle01  parentStyle02      Now   lt View style   style01   parentStyle01  parentStyle02      gt    And this last line causes to have UI bug  surly  React Native cannot deal with a deep array inside an array  So I create my helper function   import   StyleSheet   from  react-native    const styleJoiner       arg    gt  StyleSheet flatten arg     By using my styleJoiner anywhere you can combine any type of style and combine styles  even undefined or other useless types don t cause to break the styling

User · Answer

const style1             backgroundColor   quot  2196F3 quot                   const style2             color   quot white quot               const someComponent        gt            return  lt div style       style1     style2    gt This has 2 separate styles lt  div gt               Note the double curly brackets  The spread operator is your friend

User · Answer

To Expand on what  PythonIsGreat said  I create a global function that will do it for me   var css   function        var args     merge  true       Array prototype splice call arguments  0        return   extend apply null  args       This deeply extends the objects into a new object and allows for a variable number of objects as parameters  This allows you to do something like this   return   lt div style  css styles base  styles first  styles second        gt  lt  div gt      var styles       base         whatever        first         whatever        second         whatever

User · Answer

You can also combine classes with inline styling like this    lt View style   className   paddingTop  25    gt     lt Text gt Some Text lt  Text gt   lt  View gt

User · Answer

I ve found that this works best for me   It overrides as expected   return  lt View style      styles local     styles fromProps     gt

User · Answer

Array notaion is the best way of combining styles in react native   This shows how to combine 2 Style objects    lt Text style   styles base  styles background    gt Test  lt  Text gt    this shows how to combine Style object and property    lt Text style   styles base   color   red      gt Test  lt  Text gt    This will work on any react native application

User · Answer

You can use the spread operator     lt button style      styles panel button    styles panel backButton   gt Back lt  button

User · Answer

Need to merge the properties in object  For Example  const boxStyle       width    quot 50px quot     height    quot 50px quot     const redBackground          boxStyle    background   quot red quot      const blueBackground          boxStyle    background   quot blue quot           lt div style  redBackground  gt  lt  div gt    lt div style  blueBackground  gt  lt  div gt

User · Answer

If you re using React Native  you can use the array notation    lt View style   styles base  styles background     gt    Check out my detailed blog post about this

User · Answer

Object assign   is an easy solution  but the  currently  top answer s usage of it     while just fine for making stateless components  will cause problems for the OP s desired objective of merging two state objects   With two arguments  Object assign   will actually mutate the first object in-place  affecting future instantiations   Ex   Consider two possible style configs for a box    var styles        box   backgroundColor   yellow   height   100px   width   200px      boxA   backgroundColor   blue         So we want all our boxes to have default  box  styles  but want to overwrite some with a different color      this will be yellow  lt div style  styles box  gt  lt  div gt      this will be blue  lt div style  Object assign styles box  styles boxA   gt  lt  div gt      this SHOULD be yellow  but it s blue   lt div style  styles box  gt  lt  div gt    Once Object assign   executes  the  styles box  object is changed for good   The solution is to pass an empty object to Object assign    In so doing  you re telling the method to produce a NEW object with the objects you pass it  Like so      this will be yellow  lt div style  styles box  gt  lt  div gt      this will be blue  lt div style  Object assign     styles box  styles boxA   gt  lt  div gt      a beautiful yellow  lt div style  styles box  gt  lt  div gt    This notion of objects mutating in-place is critical for React  and proper use of Object assign   is really helpful for using libraries like Redux

User · Answer

I have built an module for this if you want to add styles based on a condition like this   multipleStyles styles icon     styles iconRed   true      https   www npmjs com package react-native-multiple-styles

User · Answer

To take this one even further  you could create a classnames-like helper function   const styleRules       rules    gt      return rules filter Boolean  reduce  result  rule    gt        return      result     rule                   And then use it conditionally in your components    lt div style      styleRules      divStyle       window innerWidth  gt   768   amp  amp  divStyleMd       window innerWidth  lt  768   amp  amp  divStyleSm        gt Hello World  lt  div gt

[reactjs] How to combine multiple inline style objects?

Examples related to reactjs