这些依赖使用场景的样式独立写Style

最新推荐文章于 2024-09-23 18:35:34 发布

ma_meng

最新推荐文章于 2024-09-23 18:35:34 发布

阅读量214

点赞数

分类专栏： JavaScript React

本文链接：https://blog.csdn.net/guokaigdg/article/details/100736122

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

React

3 篇文章 0 订阅

订阅专栏

依赖使用场景的样式,不要写在默认样式里

    const slideCanvasLoadingStyle = {
      position: 'absolute',
      top: 0,
      left: 0,
      zIndex: 99999,
    }

    return (
      <SlidePlayground
        ref={this.slidePlaygroundElemRef}
        key={id}
        slideCanvas={<SlideCanvas id={id} />}
        slideCanvasLoading={<SlideCanvasLoading style={slideCanvasLoadingStyle} />} //这个是例子
        selfWritingCanvas={<SelfWritingCanvas id={id} style={selfWritingCanvasStyle} />}
        remoteWritingCanvas={<RemoteWritingCanvas id={id} style={remoteWritingCanvasStyle} />}
        textInput={<TextInput id={id} style={textInputStyle} />}
        drawShape={<DrawShape id={id} style={drawShapeStyle} />}
        style={style}
        slideRenderHeight={slideRenderHeight}
        resetScrollTop={resetScrollTop}
      />
    )

    import React from 'react'
    import './index.less'
    import _ from 'lodash'
    import { PropTypes } from 'mobx-react'
    
    function SlideCanvasLoading(props) {
      const wrapStyles = _.assign({}, this.props.style)
      const { slideLoadingStatus } = props
      return (
        slideLoadingStatus === 'loading' && (
        <div className="ppt-loading-bg" style={wrapStyles}>
          <div className="icon-ppt-loading" />
        </div>
        )
      )
    }
    SlideCanvasLoading.propTypes = {
      style: PropTypes.object,
      slideLoadingStatus: PropTypes.string,
    }
    SlideCanvasLoading.defaultProps = {
      style: {},
      slideLoadingStatus: ' ',
    }
    export default SlideCanvasLoading