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

Question

我有一个自定义组件，我需要在我的使用中添加它的 margin-top。我尝试了 <MyComponent style={{ marginTop: '10px' }}> 和

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

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

也许重要的是要提到我的自定义组件 (<MyComponent/>) 的包装元素是 styled-component.

如果能修复它或使其正常工作，我们将不胜感激。谢谢！

Answer 1

style 道具与自定义组件的任何其他道具一样。您需要获取 MyComponent 的 style 道具，并将其添加到 MyComponent.

中元素之一的 style 道具中

例子

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>

Answer 2

当您使用 Styled-components 库时，您可以传递道具并根据道具设置样式

const MyComponent = styled.div`
  margin-top: ${props => props.marginTop || 'initial'}
`

<MyComponent marginTop = '20px' />

Answer 3

<MyComponent style={myStyle}> 是一个 React 组件，然后你传递 style 它将传递一个正常的 prop。内部样式应用于 html 个元素而不是 React 组件。

class App extends React.Component {
  render() {
    return (<div>App</div>);
  }
}
ReactDOM.render(<React.Fragment><App style={{color:"blue"}}/><div style={{color:"blue"}}>Element</div></React.Fragment>,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>

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

React inline style doesn't affect my custom component

javascript

reactjs

styled-components