I have a custom component where I need to add it margin-top in in of my uses. I tried <MyComponent style={{ marginTop: '10px' }}> and also

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

And it both don't work. When I do the same in the same file for a simple <div> (e.g. <div style={{ marginTop: '10px' }}> and <div style={myStyle}> it works as expected.

Maybe it is important to mention that the wrapping element of my custom component (<MyComponent/>) is a styled-component.

Would appreciate anyway to fix it or make it work. Thanks!

I have a custom component where I need to add it margin-top in in of my uses. I tried <MyComponent style={{ marginTop: '10px' }}> and also

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

And it both don't work. When I do the same in the same file for a simple <div> (e.g. <div style={{ marginTop: '10px' }}> and <div style={myStyle}> it works as expected.

Maybe it is important to mention that the wrapping element of my custom component (<MyComponent/>) is a styled-component.

Would appreciate anyway to fix it or make it work. Thanks!

• javascript
• reactjs
• styled-components

• You are using class components or functional components? – Maheer Ali Commented Mar 10, 2019 at 16:18
• 2 If you're using styled component than why you need inline styles mate ? – Code Maniac Commented Mar 10, 2019 at 16:21
• @MaheerAli A functional component – DSCH Commented Mar 10, 2019 at 16:21
• 1 @CodeManiac The component I built is being reuse in different sections and so each time it is aligned differently, but now that I write it maybe I can allow passing a marginTop prop to it. Thou I still wonder why it doesn't work – DSCH Commented Mar 10, 2019 at 16:22
• You can simply pass props and accordingly have the css. this is why we use styled component – Code Maniac Commented Mar 10, 2019 at 16:23

3 Answers 3

The style prop will be just be like any other prop for a custom component. You need to take the style prop given to MyComponent and add it to the style prop of one of the elements inside MyComponent.

Example

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>

<MyComponent style={myStyle}> is a react component and then you pass style it will be passed a normal prop. Inside style are applied to html elements not 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>

As you're using Styled-components library you can pass props and based on props you can set styles

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

<MyComponent marginTop = '20px' />