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 prop将与自定义组件的任何其他道具一样。你需要把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>

Answer 2

<MyComponent style={myStyle}>是一个反应成分然后你通过style它将通过一个正常的prop。内部样式应用于html元素而不是React Components。

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>

Answer 3

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

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

<MyComponent marginTop = '20px' />