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

Question

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

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

下面是页脚样式（整个 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;
    }

抱歉，如果这还不够信息。

标签： csssharepoint-onlinespfx

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;

  }

示例测试演示：