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

Question

我们需要在客户端页面中加载我们的应用程序。我们正在使用 React 构建它们。因此，我们通过将样式定义为对象来使用 React 内联样式。但是我们遇到了一个问题。当客户端使用标签属性指定任何 css 时。我们从未在 inline 中定义的属性获取客户端 css 的 tag 属性中使用的属性。

以下代码是我们用于导航栏的 react 内联样式。

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

在客户端，他使用样式标签属性来定义导航栏。

nav{height:40px;}

在上面这种情况下，客户端定义的nav属性也被添加到了我们的内联样式中，造成了很多麻烦。

建议一些更好的解决方案。在这种情况下，使用 Reset 类是唯一的解决方案 ??

Answer 1

您需要重置组件中受客户端 CSS 影响的所有 CSS 样式。一种方法是使用CSS all property。

CSS all 速记属性将除 unicode-bidi 和方向之外的所有属性重置为其初始值或继承值。

这个解决方案的问题是 all 在 IE 或 Edge 中不受支持。

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

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

这是一个实际的示例 - 显示相同的 <Nav /> 组件，一个使用 CSS all: initial 属性，另一个没有。如前所述，这不适用于 Internet Explorer 或 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>

如果您需要支持 IE 或 Edge（可能就是这种情况），您将需要重置正在继承的特定 CSS 属性。这可以通过以下简单的方式完成：

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

但更强大的解决方案是导入一个 CSS 组件重置，它适用于所有客户端站点。

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
  }
}

然后将此重置导入您的组件样式中

import reset from 'reset'  

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