Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

material ui - How to increase height of the BulkActionsToolbar field to make room for more bulk actions?

I have quite a lot of bulk actions and want to increase the height of the BulkActionsToolbar field. Either this isn't possible with bulkActionsDisplayed from the documentation (the actual BulkActionsToolbar is nested inside the bulkActionsDisplayed object) or there is propably something I'm missing with class property overrides in material-ui.

This is my code:

const useStyles = makeStyles({
    bulkActionsDisplayed: {
        toolbar: {
            height : '128px',
        },
    },
});
const MyList = props => {
    const classes = useStyles(props);
    return (
        <MyList {...props} 
                classes={{bulkActionsDisplayed: classes.bulkActionsDisplayed}} 
                actions={<MyActions />} 
                bulkActionButtons={<MyBulkActionButtons />}
        >
           (...)

It's the RaBulkActionsToolbar-toolbar's height I need to change, while bulkActionsDisplayed is provided in the documentation.

<div class="MuiPaper-root MuiCard-root RaList-content-44 RaList-bulkActionsDisplayed-45 makeStyles-bulkActionsDisplayed-41 MuiPaper-elevation1 MuiPaper-rounded">
    <div class="MuiToolbar-root MuiToolbar-regular RaBulkActionsToolbar-toolbar-58 MuiToolbar-gutters" data-test="bulk-actions-toolbar">
        <div class="RaBulkActionsToolbar-title-61">
            (...)
        </div>
        <div class="MuiToolbar-root MuiToolbar-regular RaTopToolbar-root-63 MuiToolbar-gutters">
            
        </div>
    </div>

This is (I think) the relevant react-admin core code:

As you can see, the Content corresponds to bulkActionsDisplayed, but I need to customize the height in BulkActionsToolbar ...

            <div className={classes.main}>
                <Content
                    className={classnames(classes.content, {
                        [classes.bulkActionsDisplayed]: selectedIds.length > 0,
                    })}
                    key={version}
                >
                    {bulkActionButtons !== false && bulkActionButtons && (
                        <BulkActionsToolbar {...controllerProps}>
                            {bulkActionButtons}
                        </BulkActionsToolbar>
                    )}
                    {children &&
                        // @ts-ignore-line
                        cloneElement(Children.only(children), {
                            ...controllerProps, // deprecated, use ListContext instead, to be removed in v4
                            hasBulkActions: bulkActionButtons !== false,
                        })}
                    {pagination && cloneElement(pagination, listContext)}
                </Content>
                {aside && cloneElement(aside, listContext)}
            </div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...