Search code examples
reactjsglyphicons

glyphicon add margin in JSX

What is the proper way to add the margin to the glyphicon used in React component? I tried simple: <span className='glyphicon glyphicon-exclamation-sign' margin-left='10px'/> but it doesn't add the required margin. According to this: https://zhenyong.github.io/react/tips/inline-styles.html what should work I believe is <span className='glyphicon glyphicon-exclamation-sign' style={margin-left: '10px'}/> but it gives me error: Module build failed: SyntaxError: Unexpected token, expected , I tried also adding the styled-component (which we use over the css) like

const glyp = styled.span.attrs({
  className: 'glyphicon glyphicon-exclamation-sign'
)}`
  margin-left: 10px
`

but it doesn't render the exclamation mark sign at all (however takes space).

What's the proper way to do it?

Solution

  • Replace "margin-left" with "marginLeft".

    From the React docs (which you linked in your question):

    Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage).