Question

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

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

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 handhand属性将除了unicode-bidi和direction之外的所有属性重置为其初始值或继承值。

此解决方案的问题是IE或Edge不支持all。

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

React内联样式与Client CSS冲突

1 个答案: