学习者问题：无法将几个按钮固定到位（SPFX、React、JSX）

Question

我有一个 Parent class 组件和一个 child。 child 将成为 <Modal /> (MS Fabric UI) 中的页脚组件。问题是我试图在模态底部保持静态的上一个和下一个按钮相对于模态中的内容移动。详细地说，它们紧贴在它们所在页面的最低字段的底部，因此当页面更改时，它们会上下跳动。我要他们修好。我已经设法在我制作的另一个 web 部件上做到了这一点，但因为这是一个模态，我认为它在 div 块和 CSS.

方面略有不同

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

出于显而易见的原因，我不想使用 position: fixed 或 absolute。

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

       <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>

这是页脚样式（整个 Web 部件样式来自一个 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）

Learner Question: Having trouble keeping a couple of buttons in place (SPFX, React, JSX)

css

sharepoint-online

spfx