Реагирующий встроенный стиль не влияет на мой пользовательский компонент

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 реквизит, данный 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.

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-компоненты библиотека, вы можете передавать реквизиты и на основе реквизитов вы можете устанавливать стили

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

<MyComponent marginTop = '20px' />