如何为React中导入的组件添加自定义样式且不影响原样式？

1. 先修正拼写错误 #

你代码里的内联样式属性名写错了：postion → position，这是最直接的问题，修正后内联样式可能就能生效：

const style1 ={
    position:'relative', left:'200px'
 }

2. 确认Nav组件是否接收并传递style属性 #

如果Nav是自定义组件，必须确保它把外部传入的style props传递给内部的根DOM元素（比如<nav>标签）。比如Nav组件的代码需要写成这样：

// nav.js
import './nav.css';

export default function Nav(props) {
  // 将外部传入的style传递给根元素
  return (
    <nav style={props.style} className="nav-original-class">
      {/* Nav的内容 */}
    </nav>
  );
}

如果Nav组件没有处理style props，外部传的样式根本不会作用到实际的DOM节点上。

3. 提升自定义className的CSS优先级 #

如果用className方式没生效，是因为原Nav的CSS优先级更高。可以通过更精确的选择器来覆盖：
在Landing_Page.css中编写：

/* 利用父容器选择器提升优先级 */
.contain .custom-nav {
  position: relative;
  left: 200px;
  /* 若仍被覆盖，可临时用!important（尽量少用，仅作为兜底方案） */
  /* left: 200px !important; */
}

然后在组件中给Nav添加className：

<Nav className="custom-nav" />

内容的提问来源于stack exchange，提问作者Driver