LinearProgress 栏的长度与导航栏的长度不同答案

【问题标题】：LinearProgress bar not having the same length as navbarLinearProgress 栏的长度与导航栏的长度不同
【发布时间】：2020-02-03 04:21:24
【问题描述】：

我正在使用 Material UI 的 LinearProgress，我制作了一个自定义的 ColoredLinearProgress 只是为了改变它的颜色：

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { LinearProgress } from '@material-ui/core';

class ColoredLinearProgress extends Component {
  render() {
    const { classes } = this.props;
    return <LinearProgress {...this.props} classes={{colorPrimary: classes.colorPrimary, barColorPrimary: classes.barColorPrimary}}/>;
  }
}

const styles = props => ({
  colorPrimary: {
    backgroundColor: '#FD8907',
  },
  barColorPrimary: {
    backgroundColor: '#EEC291',
  }
});

export default  withStyles(styles)(ColoredLinearProgress);

然后我将它包含在我的页面渲染中，如下所示：

return(   
                <div>
                {this.state.loading ? <ColoredLinearProgress /> : null}  
                // more code
                </div>

结果是 ColoredLinearProgress 显示的长度比导航栏短。我的导航栏是从 App.js 调用的

render() {
  return (
    <div className="App">
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Suspense fallback={(<div>Loading</div>)}>
          <Navbar updateUsername={this.updateUsername} username={this.state.username}/>
          <Switch>
            <Route exact path="/" component={MyPage} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    </div>    
  );
}

我已经找到了这个问题，它似乎在我的导航栏渲染中

    return(
            <nav>
                <Link to={{pathname: "/"}}>
                    <img src={logo} alt="Home" id="logo"/>
                </Link>
                <div className="dropdown">
                    <button className="navbar_item" onClick={this.showlogin}>{t('navbar.signIn')}</button>
                </div>
                {/* If I comment the following 'Link' the LinearProgress shows perfectly! */}
                <Link to={{pathname: "/SignUp"}}>
                    <p className="navbar_item" id="sign_up" onClick={() => this.showlogin(true)}>{t('navbar.signUp')}</p>
                </Link>
        </nav>
    )
}

如果我评论最后一个链接元素，线性进度显示正常，否则显示比链接元素之前的导航栏短。为什么？

【问题讨论】：

标签： javascript html reactjs material-ui

【解决方案1】：

好的，问题显然是因为“p”元素，所以我将其更改为按钮。

    return(
            <nav>
                <Link to={{pathname: "/"}}>
                    <img src={logo} alt="Home" id="logo"/>
                </Link>
                <div className="dropdown">
                    <button className="navbar_item" onClick={this.showlogin}>{t('navbar.signIn')}</button>
                </div>
                {/* If I comment the following 'Link' the LinearProgress shows perfectly! */}
                <Link to={{pathname: "/SignUp"}}>
                    <button className="navbar_item" id="sign_up" onClick={() => this.showlogin(true)}>{t('navbar.signUp')}</button>
                </Link>
        </nav>
    )
}

【讨论】：