glyphicon 在 JSX 中添加边距答案

【问题标题】：glyphicon add margin in JSXglyphicon 在 JSX 中添加边距
【发布时间】：2018-09-19 21:47:07
【问题描述】：

将边距添加到 React 组件中使用的字形图标的正确方法是什么？我试过很简单： <span className='glyphicon glyphicon-exclamation-sign' margin-left='10px'/> 但它没有添加所需的边距。根据这个： https://zhenyong.github.io/react/tips/inline-styles.html 我认为应该起作用的是<span className='glyphicon glyphicon-exclamation-sign' style={margin-left: '10px'}/>，但它给了我错误： Module build failed: SyntaxError: Unexpected token, expected , 我还尝试添加样式组件（我们在 css 上使用），例如

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

但它根本不呈现感叹号符号（但占用空间）。

正确的做法是什么？

【问题讨论】：

标签： reactjs glyphicons

【解决方案1】：

将“margin-left”替换为“marginLeft”。

来自 React 文档（您在问题中链接）：

样式键是驼峰式的，以便与访问一致来自 JS 的 DOM 节点上的属性（例如 node.style.backgroundImage）。

【讨论】：