Question

我有一个Parent class组件和一个孩子。该子项将成为<Modal />（MS Fabric UI）中的页脚组件。问题是我试图在模式底部保持静态的上一个和下一个按钮相对于模式中的内容移动。详细地说，它们拥抱所处页面的最低字段的底部，因此，在更改页面时，它们会上下跳跃。我要修复它们。我已经设法在我制作的另一个Web部件上执行此操作，但是由于这是一种模式，因此我认为在div块和CSS方面稍有不同。

<Footer />组件位于容纳<Modal />的div块和容纳整个render()的div块内。两个外壳<divs>中的任何一个都没有样式CSS。我创建的表单允许用户单击一个项目，然后显示带有项目详细信息的模式。模态有几个页面，可以使用上一页/下一页按钮进行更改。这些是我要修复的按钮。该描述对于您理解JSX的布局很有必要。

出于明显的原因，我不想使用固定或绝对职位。

下面是渲染的结尾，我不确定这是否足以让您理解...。

       <div className={styles.footerContainer}>
          <Footer 
              handler={this.handler}
              CurrentStep={this.state.CurrentStep}
          />
       </div>
     </Modal>
   </div> 
  </div>   
  );
 }

这是页脚渲染：

export class Footer extends React.Component<any, any > {
    public render():  React.ReactElement<{}> {
        return (
           <div>
              <div className={styles.previousButtonContainer}>
                <DefaultButton className={styles.previousButton}
                    disabled={false}
                    checked={true}
                    text="Previous"
                    onClick={this._prev}
                  />
            </div>
         <div className={styles.nextButtonContainer}>
               <DefaultButton className={styles.nextButton}
                    disabled={false}
                    checked={true}
                    text="Next"
                    onClick={this._next}
               />  
          </div> 
        </div>

这是页脚样式（整个webpart样式来自一个CSS文件）：

.footerContainer{
    display: flex;
    position: relative;
    justify-content: space-evenly;
    bottom: 0%;
    height: 60px;
    flex-grow: 0;
    overflow: hidden;
    }
    .nextButtonContainer{
      float: right;
    }
    .nextButton {
      position: relative;  
      border-radius: 8px;   
    }
    .previousButtonContainer {
      float: left;
    }
    .previousButton {
      position: relative;  
      border-radius: 8px;
    }

对不起，如果这不是足够的信息。

Answer 1

这通常与CSS继承有关。

尝试在Webpart容器的外部添加自定义CSS。

例如：

import * as React from 'react';
import styles from './ReactSpfx.module.scss';
import { DefaultButton } from 'office-ui-fabric-react';

export default class Footer extends React.Component {
    render() : React.ReactElement{
        return (
            <div>
            <div className={styles.previousButtonContainer}>
              <DefaultButton className={styles.previousButton}
                  disabled={false}
                  checked={true}
                  text="Previous"
                  //onClick={this._prev}
                />
          </div>
       <div className={styles.nextButtonContainer}>
             <DefaultButton className={styles.nextButton}
                  disabled={false}
                  checked={true}
                  text="Next"
                  //onClick={this._next}
             />  
        </div> 
      </div> 
      );
    }
}

父项

<Modal          
              titleAriaId={this._titleId}
              subtitleAriaId={this._subtitleId}
              isOpen={showModal}
              onDismiss={this._closeModal}
              isModeless={true}
              containerClassName={contentStyles.container}
                    >          
              <div >

              <div className={contentStyles.header}>
            <span id={this._titleId}>Lorem Ipsum</span>
            <IconButton
              styles={iconButtonStyles}
              iconProps={{ iconName: 'Cancel' }}
              ariaLabel="Close popup modal"
              onClick={this._closeModal as any}
            />
          </div>
              <div id={this._subtitleId} className={contentStyles.body}>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in
                  leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum
                  vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a
                  odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus,
                  maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat
                  eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
                  efficitur.{' '}
                </p>
              </div>
              </div>
              <Footer />
            </Modal>

.module.scss

.webpartcontaner{
 web part css
}
.footerContainer{
  display: flex;
  position: relative;
  justify-content: space-evenly;
  bottom: 0%;
  height: 60px;
  flex-grow: 0;
  overflow: hidden;
  }
  .nextButtonContainer{
    float: right;

  }
  .nextButton {
    position: relative;  
    border-radius: 8px;          
  }
  .previousButtonContainer {
    float: left;

  }
  .previousButton {
    position: relative;  
    border-radius: 8px;

  }

示例测试演示：

学习者问题：无法将几个按钮保持在适当的位置（SPFX，React，JSX）

1 个答案: