Default display:block interferes with flexbox layouts and other complications

[jmbldwn]

I ended up making my own wrapper to inherit display properties to fix this. Curious why this isn't the default?

import React from 'react';
import PropTypes from 'prop-types';
import LoadingOverlay from 'react-loading-overlay';

const Loading = ({ active, text, children }) => (
    <LoadingOverlay
        active={active}
        spinner text={text}
        styles={{
            wrapper: {
                display: 'inherit',
                'flex-grow': 'inherit'
            }
        }}>
        {children}
    </LoadingOverlay>
);

Loading.propTypes = {
    active: PropTypes.bool,
    text: PropTypes.string,
    children: PropTypes.node
};

export default Loading;

[maximiliancsuk]

Having the same issue!

@jmbldwn Thanks for the code snippet, that worked well for me! I additionally had to set flex-direction to 'inherit' to get it to work. There might be more important css properties to inherit, depending on the usecase.