javascript - 在 react 中使用内联样式的正确方法是什么？

Question

我是 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？

Answer 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 文件而不是外部样式表而言，内联