Question

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

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

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，但我想内联-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在该组件中访问），但其中包含的样式将不会应用。

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

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

1 个答案: