Question

我正在使用ReactJS和ANTD。我有一个模式，我在上面设置了填充，以使文本居中对齐。现在，我要添加一些设计。这就是我希望的样子：

现在是这样的：

CSS：

modalStyle {
   padding: 100px 50px
}

index.js

const styling ={
design:{
        background: "#FFFFFF",
        width: "400px",
        height: "30px",
        margin: "40px 50px 40px 0px !important"
    }
}

const Modal = props => {
return (

        <Modal
            className={"modalStyle"}

        > 
            <div style={styling.design}> </div>
        </Modal>
)

Answer 1

请尝试在内部div中添加负的左边距，以抵消模式容器的填充。

const styling ={
design:{
        ...otherStyles,
        margin: "40px 50px 40px -50px !important"
    }
}

实际上，它的内容会一直到达左边缘，因此，如果您仍然希望进一步设置文本，则可以在div上添加填充。

const styling ={
design:{
        ...otherStyles,
        margin: "40px 50px 40px -50px !important",
        padding: 100px 50px,
    }
}

这是一个内部div的草图，该内部div超出了模态https://codesandbox.io/s/counter-act-padding-in-child-o5y7z

的边界

恕我直言，我认为最好的方法是使用:before和:after伪元素，我也可以尝试添加一个示例。

Answer 2

我建议使用flex来做到这一点，

//组件

const FeatureCard = ({ src, alt, Graphic, title, text, direction, id, featuresList, Buttons }: FeatureCardProps) => {
    const imageContainerRef = useRef<HTMLDivElement>(null)
    const [imageContainerClassList, setImageContainerClassList] = useState<string>('img-container')
    const [renderedGraphic, setRenderedGraphic] = useState<string>('')

    const isInView = () => {
        if (imageContainerRef.current) {
            const rect = imageContainerRef.current.getBoundingClientRect()
            return rect.top >= 0 && rect.bottom <= window.innerHeight
        }
        return false
    }

    const addInViewClass = () => {
        if(isInView()) {
            setImageContainerClassList('img-container in-view')
        }
    }

    const scrollHandler = () => {
        addInViewClass()
    }

    useEffect(() => {
        window.addEventListener('scroll', scrollHandler)
        addInViewClass()
        return (() => {
            window.removeEventListener('scroll', scrollHandler)
        })
    })

    return (
        <Styled className="row" direction={direction} id={id} flexDirectionColumnForImgContainer={featuresList && featuresList.length ? true : false}>
            <div
                className={imageContainerClassList}
                ref={imageContainerRef}
            >
                {Graphic ? <Graphic 
                    renderedGraphic={renderedGraphic}
                /> : null}
                {src ? <img
                    src={src}
                    alt={alt}
                    style={ featuresList && featuresList.length ? { transform: 'scale(.9)' } : {}}
                /> : null}
                {featuresList && featuresList.length ? (<ul>
                    {featuresList.map(
                        (feat, i) => <li key={i + feat}>{feat}</li>
                    )}
                </ul>) : null}
            </div>
            <div className="text">
                <h2>{title}</h2>
                {text}
                { Buttons ? <Buttons 
                    setRenderedGraphic={setRenderedGraphic}
                /> : null}
            </div>
        </Styled>
    )
}

export default FeatureCard

// CSS

<div className="modal">
    <div className="modal-bar" />
    <div className="modal-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam.
    </div>
    <div className="modal-bar" />
  </div>

我为相同的对象创建了一个沙箱 https://codesandbox.io/s/agitated-brattain-kosui

忽略模式中的CSS

2 个答案: