React内联样式与客户端CSS冲突

Question

We need to load our application in the clients page. We are building them using React. So, We are using React Inline Styles by defining the style as Objects. But we encountered an issue. When the client specified any css by using tag attributes. The property which we never defined in inline get the property used in the tag attribute of the client css.

This below code is the react inline style we used for the navbar.

var style = {
navigation: {
    minWidth: '50px ',
    position: 'relative ',
    marginBottom: '20px ',
    border: '1px solid transparent '
},
};
render function() {
 return(<nav style={style.navigation}> ...... </nav>);
}

In the client side he is using the style tag attribute for defining the navbar.

nav{height:40px;}

In this above case, the nav attribute defined by the client is also added to our inline styling and causing much trouble.

Suggest some better solutions. Using Reset class is the only solution in this case ??

Answer 1

You need to reset any CSS styles in your component that are affected by the client's CSS. One method to do this would be to use the CSS all property .

The CSS all shorthand property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value.

The problem with this solution is all is not supported in IE or Edge.

var style = {
  navigation: {
    all: 'initial',
    minWidth: '50px ',
    position: 'relative ',
    marginBottom: '20px ',
    border: '1px solid transparent '
  },
};

render function() {
  return(<nav style={style.navigation}> ...... </nav>);
}

Here's an example of this in action - showing the same <Nav /> component, one using the CSS all: initial property, the other without. As said before, this will not work on Internet Explorer or Edge.

 class Nav extends React.Component { render() { var style = { navigationWithAll: { all: 'initial', border: '1px solid red' }, navigation: { minWidth: '50px ', position: 'relative ', marginBottom: '20px ', border: '1px solid red' } }; return ( <div> <nav style={style.navigation}>Navigation</nav> <nav style={style.navigationWithAll}>Navigation</nav> </div> ) } } ReactDOM.render( <Nav />, document.getElementById('app') ); 

 nav { height: 100px; background-color: gray; font-family: "Comic Sans MS"; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

If you need to support IE or Edge, which is probably the case, you will need to reset the specific CSS properties which are being inherited. This could be done with something as simple as the following:

styles = {
  navigation: {
    height: 'initial'
  }
}

but a more robust solution, which would work across all client sites would be to import a CSS component reset.

reset = {
    margin: 'initial',
    padding: 'initial',
    height : 'auto',
    height: 'initial',
    width: 'auto',
    // any other properties you want to reset, or a full list of CSS properties to reset to initial/auto
  }
}

Then import this reset into your component styles

import reset from 'reset'  

styles = {
  navigation: {
    ...reset,
    border: 1px solid red,
    // your custom styles
  }
}