Trying to override File Uploader's button text, but ButtonComponent.props
has any
type, so can't figure out what I am able to pass there. My idea inspired by Button docs was to set children
property, but button text remains unchanged. Could anyone give a hint?
import { FileUploaderProps, FileUploader } from 'baseui/file-uploader';
import React, { FC } from 'react';
const StyledFileUploader: FC<FileUploaderProps> = (props) => {
return (
<FileUploader
{...props}
overrides={{
ButtonComponent: {
props: {
children: 'text',
overrides: {
BaseButton: {
children: 'text',
props: {
children: 'text',
},
style: () => ({
backgroundColor: '#A4A4A4',
color: '#fff',
borderRadius: '2px',
paddingTop: '3px',
paddingRight: '22px',
paddingBottom: '3px',
paddingLeft: '22px',
fontSize: '16px',
lineHeight: '20px',
':hover': {
backgroundColor: '#A4A4A4',
color: '#fff',
},
}),
},
},
},
},
FileDragAndDrop: {
style: () => {
return {
backgroundColor: 'transparent',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: 'transparent',
borderBottomColor: 'transparent',
};
},
},
ContentMessage: {
style: () => {
return {
display: 'none',
};
},
},
}}
/>
);
};
export default StyledFileUploader;
I doubt you can without overriding the whole component. This is weird exception for the children
props.
Have a look at this minimal example. startEnhancer
will be respected, children
not:
import { FileUploader } from "baseui/file-uploader";
import React from "react";
const StyledFileUploader = (props) => {
return (
<FileUploader
{...props}
overrides={{
ButtonComponent: {
props: {
startEnhancer: "I'm here!",
children: "I won't be..."
}
}
}}
/>
);
};
export default StyledFileUploader;
The reason can be found in the implementation:
FileUploader
gives Button
the overrides props hereButton
ifself passes its own props (this.props
) to ButtonInternals
hereButtonInternals
renders its children
and some other stuff hereBut FileUploader
passed {locale.fileuploader.browseFiles}
to the Button
as children
here, which is after the overrides
(and therefore overrides the overrides...)
You may want to file a bug report (so children
gets put before the override props in FileUploader
) or just override the whole button component.