Radium & unexpected effects on layouts

[brandonmp]

AFAIK i followed the implementation guidelines accurately, but upon switching my component from regular in-line styles using Object.assign() to Radium stylings, my layout fell apart. Anyone else encountered this?

//no radium

const style = {
  verticalBox: {
    height: '825px',
    width: '250px',
  },
  squareBox: {
    height: '250px',
    width: '250px',
  },

  topSection: {
    section: {
      height: '825px',
      width: '100%',
      backgroundColor: 'pink',
      display: 'flex',
      flexFlow: 'row nowrap',
      justifyContent: 'flex-end',
      alignItems: 'flex-end',
      alignContent: 'stretch'
    },
    verticalBox: {
      backgroundColor: '#0D2C40',
      flex: '0 0 auto',
    },
    squareBox: {
      backgroundColor: '#F15B31',
      flex: '0 0 auto',
    },
    overlappingBox: {
      top: '575px',
      zIndex: '10',
      position: 'absolute',
      right: '250px'
    }
  },
}

export const HomeView = () => (
  <div>
    <div style={style.topSection.section}>
      <div style={Object.assign({}, style.verticalBox, style.topSection.verticalBox)}>
        </div>
      <div style={Object.assign({}, style.squareBox, style.topSection.squareBox)}>
      </div>
      <div style={Object.assign({}, style.squareBox, style.topSection.squareBox1)}>
      </div>
      <div style={Object.assign({}, style.verticalBox, style.topSection.overlappingBox)}>
      </div>
      <div style={Object.assign({}, style.squareBox, style.topSection.squareBox1)}>
      </div>

    </div>
  </div>
)

export default HomeView

[note box sizes might be diff't between pics as I zoomed for a more accurate pic; the stylings are fine wrt box sizes]

//after radium

const style = {
  verticalBox: {
    height: '825px',
    width: '250px',
  },
  squareBox: {
    height: '250px',
    width: '250px',
  },

  topSection: {
    section: {
      height: '825px',
      width: '100%',
      backgroundColor: 'pink',
      display: 'flex',
      flexFlow: 'row nowrap',
      justifyContent: 'flex-end',
      alignItems: 'flex-end',
      alignContent: 'stretch'
    },
    verticalBox: {
      backgroundColor: '#0D2C40',
      flex: '0 0 auto',
    },
    squareBox: {
      backgroundColor: '#F15B31',
      flex: '0 0 auto',
    },
    overlappingBox: {
      top: '575px',
      zIndex: '10',
      position: 'absolute',
      right: '250px'
    }
  },
}

class HomeView extends React.Component {
  render() {
    return (
        <div style={style.topSection.section}>
          <div style={[style.verticalBox, style.topSection.verticalBox]}>
          </div>
          <div style={[style.squareBox, style.topSection.squareBox]}>
          </div>
          <div style={[style.squareBox, style.topSection.squareBox]}>
          </div>
          <div style={[style.verticalBox, style.topSection.overlappingBox]}>
          </div>
          <div style={[style.squareBox, style.topSection.squareBox]}>
          </div>
        </div>
        )
      }
 }
export default Radium(HomeView)

[ianobermiller]

Can you look at the rendered output of inline styles to see what the actual difference is between the two? That will help us debug what's going on.

[necolas]

Could this be related? https://github.com/petehunt/jsxstyle/issues/23

I've encountered the same React issue where it silently drops display because the value contains semicolons.

[alexlande]

Yeah, could be related to the React 15 vendor prefixing issue. See https://github.com/FormidableLabs/radium/issues/602 and https://github.com/facebook/react/pull/6701 for more on that.

[necolas]

That's a shame. Vendor prefixing values for inline styles in now broken and fixing it is pretty tricky until React decides on a new API.