时间戳

首页 > 解决方案 > React 内联样式不会影响我的自定义组件

javascript - React 内联样式不会影响我的自定义组件

问题描述

我有一个自定义组件，我需要将它添加到我的使用中。<MyComponent style={{ marginTop: '10px' }}>我也试过了

const myStyle = { marginTop: '10px' };
`<MyComponent style={myStyle}>`;

而且它都不起作用。当我在同一个文件中为一个简单的文件做同样的事情时<div>（例如<div style={{ marginTop: '10px' }}>，<div style={myStyle}>它按预期工作。

也许值得一提的是，我的自定义组件 ( <MyComponent/>) 的包装元素是styled-component.

无论如何都要修复它或让它工作。谢谢！

标签： javascriptreactjsstyled-components

解决方案

该style道具将与自定义组件的任何其他道具一样。您需要获取style给定的道具MyComponent并将其添加到style其中一个元素的道具中MyComponent。

例子

function MyComponent(props) {
  return <div style={props.style}>MyComponent</div>;
}

function MyBrokenComponent() {
  return <div>MyBrokenComponent</div>;
}

function App() {
  const style = { marginTop: "10px", backgroundColor: "green" };

  return (
    <div>
      <MyBrokenComponent style={style} />
      <MyComponent style={style} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

推荐阅读