title: Uncaught TypeError: Cannot assign to read only property '' of object '#<Object>'
body: <p>i don't know what difference in this code.
  class a is component and example is example.js</p>
  
  <pre><code>import React, {Component} from 'react';
  
  const styles = {
      border: {
          display: 'inline-block',
          height: '19px',
          padding: '1px 8px 0',
          border: '2px solid',
          borderRadius: '12px',
          lineHeight: '20px',
          fontSize: '14px',
          verticalAlign: 'top',
      },
      default: {
          display: 'inline-block',
          height: '20px',
          padding: '1px 10px 0',
          borderRadius: '10px',
          lineHeight: '21px',
          fontSize: '13px',
          verticalAlign: 'top',
      },
      state: {
          display: 'inline-block',
          width: '14px',
          height: '13px',
          paddingTop: '1px',
          lineHeight: '14px',
          fontSize: '11px',
          color: '#fff',
          letterSpacing: '-0.5px',
          textAlign: 'center',
          verticalAlign: 'top',
      }
  };
  
  class A extends Component {
      static defaultProps = {
          type: 'default',
      };
  
      render() {
          const {
              label,
              style,
              type,
              ...other
          } = this.props;
  
  
          switch (type) {
  
              case 'border':
                  elementStyle = styles.border;
                  break;
              case 'default':
                  elementStyle = styles.default;
                  break;
              case 'state':
                  elementStyle = styles.state;
                  break;
          }
  
          return (
              &lt;span style={Object.assign(elementStyle, style)} {...other}&gt;{label}&lt;/span&gt;
          );
      }
  }
  
  export default A;
  </code></pre>
  
  <p>and example code is example.js</p>
  
  <pre><code>import A from './A';
  
      export default class Example extends React.Component {
          render() {
              return (
                  &lt;div&gt;
                      &lt;A style={{background: '#fe6969', color: '#fff'}} /&gt; &amp;nbsp;
                      &lt;A style={{background: '#ff8137', color: '#fff'}} /&gt; &amp;nbsp;
                      &lt;A  style={{background: '#fcb400', color: '#fff'}} /&gt; &amp;nbsp;
                  &lt;/div&gt;
              );
          }
      }
  </code></pre>
  
  <p>this code error is Uncaught TypeError: Cannot assign to read only property 'background' of object '#'</p>
  
  <p>i use babel-loader 8, babel7 ,webpack4</p>
  
  <p>if i correct Object.assgin({}, elementStyle, style) is working.
  i think this error occur when rerendering A component.
  i don't know why this error...</p>
  
  <p>please help me. </p>