在反应中使用内联样式的正确方法是什么？答案

【问题标题】：What is the correct way to use inline style in react?在反应中使用内联样式的正确方法是什么？
【发布时间】：2018-06-13 01:16:29
【问题描述】：

我是 react 新手，我试图找出在 react 中使用内联样式的正确方法

例如，这是我正在做的事情

import React from 'react';
import Classes from './toolbar.css';
import Logo from '../../logo/logo.js';
import Navitems from '../navigation-items/navigation-items.js';

const toolbar = (props) => {
  return (
    <header className={Classes.Toolbar}>
    <div> Menu </div>
    <Logo style={{height: "70%"}}/>
    <nav className={Classes.DesktopOnly}>
    <Navitems />
    </nav>
    </header>
  )

}

export default toolbar;

这似乎不起作用

 <Logo style={{height: "70%"}}/>

任何猜猜我会做错什么？

另外，Logo 有自己的外部 CSS，但我猜 inline-Css 应该优于外部 CSS？

【问题讨论】：

如果你没有给我们展示的 Logo 没有指定 ...props 或者 style 属性，那么它就不会放在元素上
如果它在组件上，它就不是真正的内联 CSS。尽管看起来像 HTML 元素，<Logo /> 实际上是从 JS 文件导入的 React 组件，因此内联样式的工作方式不同。相反，它将“样式”视为您可以从 Logo.js 访问的道具，console.log(this.props.style) 将在其中记录 {height: "70%"}

标签： javascript css reactjs

【解决方案1】：

这是来自React Docs 的内联样式*示例：

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

如果您希望包含样式规则的对象存在于 style 属性本身中，文档也提供了一个示例。

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

请注意，在这两个示例中，style 是 JSX 标记的属性，而不是用户定义的组件（如 <Logo/>）的属性。如果您尝试将样式直接传递给组件，则传递的对象将存在于该组件的 props 中（并且可以通过 props.style 在该组件中访问），但其中包含的样式将不会被应用。

*内联样式规则嵌入在组件的 JSX 文件中，而不是外部样式表

【讨论】：