在React项目中定位组件

要添加内联样式,应定义 style 对象作为道具,并向其传递值,如 doniyor2109 提到。然而,使用这个有一些警告。

style={{ height: 100, height: '100px', height: '100%', minHeight: '100px'}} .

• 并非每个值都应作为整数传递,有些值需要作为字符串传递
• 并不是每个css属性都能像你期望的那样被传递,css min-height minHeight ,所以将所有连字符替换为小写字母
• 内联风格变得难以管理。我建议您至少在组件外部创建一个对象,然后像这样传入:

const DivStyle = { minHeight: '100px' }

然后:

<LogoutButtonComponent style={DivStyle} />

• 你可以加前缀 DivStyle 带着 export 如果你想 import {DivStyle} from './somefile' 在其他地方

• 我建议你去图书馆看看,比如 styled-components 因为它使造型更容易!

• 我建议你退房 this article 这概括了你的选择

你不会真的像那样给组件添加样式。最好在源代码中为实际组件添加这些样式。那么,你到底想让它怎么显示呢?我将提供一个模板的一种,你可以改变它,以你想要的。

转到您的源代码获取注销按钮组件。在返回渲染方法时,请尝试添加 div 称之为容器。然后在css文件中添加样式 div 或者如果你正在使用 react-bootstrap 或 reactstrap 或 @material/ui/core 您可以根据他们的文档调整样式。

你可以添加你的 css 对于 className .container 让它看起来像你想要的那样。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.props.onLogout();
  };

  render() {
    return ( 
      <div className="container">
         {* notice the className here *}
         <button type="button" onClick={this.handleClick}>Logout</button>
     </div>
    )
  }
}

希望这有帮助。