React内联样式不影响我的自定义组件
React内联样式不影响我的自定义组件
提问于 2019-03-10 16:17:17
我有一个自定义组件，在这里，我需要在我的使用中增加它的页边距。我试过<MyComponent style={{ marginTop: '10px' }}>
const myStyle = { marginTop: '10px' };
`<MyComponent style={myStyle}>`;但两者都不起作用。当我在同一个文件中对一个简单的<div> (例如<div style={{ marginTop: '10px' }}>和<div style={myStyle}> )执行相同的操作时，它会像预期的那样工作。
也许值得一提的是，我的自定义组件(<MyComponent/>)的包装元素是一个styled-component。
无论如何都希望能修好它或者让它发挥作用。谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-10 16:26:29
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>
Stack Overflow用户
发布于 2019-03-10 16:26:33
当您使用Styled-components库时，您可以传递道具，并且可以基于道具设置样式
const MyComponent = styled.div`
margin-top: ${props => props.marginTop || 'initial'}
`
<MyComponent marginTop = '20px' />Stack Overflow用户
发布于 2019-03-10 16:30:37
<MyComponent style={myStyle}>是一个react，然后通过style，它将被传递一个普通的prop。内部样式应用于html元素，而不是响应组件。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55089750
复制相关文章
相似问题
腾讯云开发者
