React重写子元素样式

Question

我有以下结构

<button>
<OtherComponent />
</button>

OtherComponent只是给出一个按钮重写OtherComponent的样式，例如:将边距设置为0。我试过了(不成功)

<button style={{ 'span': { margin: 0 }}}>
<OtherComponent />
</button>

Answer 1

内联样式仅影响应用于的当前元素

如果你想给子元素设置样式，那么你应该从CSS文件中选择它。

所以在你的父组件中你可以这样做:

import React from "react";
import { OtherComponent } from "./components/OtherComponent";
import "./styles.css";
export default function App() {
return (
<div className="App">
<OtherComponent />
</div>
);
}

然后在styles.css文件中:

.App span {
margin: 0;
}

---

完整的例子

Answer 2

一个简单的方法是在后端添加div/Button并覆盖style={{marginLeft: "100px"}}和双括号。

父组件

import "./styles.css";
import OtherComponent from "./OtherComponent";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button style={{ marginLeft: "100px" }}>
<OtherComponent />
</button>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

子组件

import React from "react";
import "./buttonStyle.css";
class OtherComponent extends React.Component {
render() {
return <button className="button">Style Button</button>;
}
}
export default OtherComponent;

CodeSandBox Live Demo