Question

我有一个自定义组件，需要在其中添加边际使用功能。我尝试过<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道具将与自定义组件的其他任何道具一样。您需要采用赋予style的{{1}}属性，并将其添加到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"));

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库时，您可以传递道具，并根据道具可以设置样式

<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内联样式不会影响我的自定义组件

3 个答案: