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

【问题标题】：React inline style doesn't affect my custom componentReact 内联样式不会影响我的自定义组件
【发布时间】：2019-08-01 01:15:33
【问题描述】：

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

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

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

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

无论如何，如果能修复它或让它工作，我将不胜感激。谢谢！

【问题讨论】：

你使用的是类组件还是函数组件？
如果您使用样式化组件而不是为什么需要内联样式？
@MaheerAli 一个功能组件
@CodeManiac 我构建的组件在不同的部分中被重用，因此每次它的对齐方式都不同，但现在我写了它，也许我可以允许向它传递一个 marginTop 道具。你我还是想知道为什么它不起作用
您可以简单地传递道具并相应地拥有 css。这就是我们使用样式化组件的原因

标签： javascript reactjs styled-components

【解决方案1】：

style 属性就像自定义组件的任何其他属性一样。您需要将style 赋予MyComponent 的属性添加到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>

【讨论】：

【解决方案2】：

<MyComponent style={myStyle}> 是一个反应组件，然后你传递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>

【讨论】：

【解决方案3】：

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

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

<MyComponent marginTop = '20px' />

【讨论】：