Override BaseWeb's File Uploader button label text

Question

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;

Answer 1

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:

1. FileUploader gives Button the overrides props here
2. Button ifself passes its own props (this.props) to ButtonInternals here
3. ButtonInternals renders its children and some other stuff here

But 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.

Answer 2

With the help of accepted answer, I figured out how to override button component. Originally I thought it was not possible (due to component losing click handlers), but props is actually carrying it, so we can use <Button {...props}

export const StyledFileUploader: FC<FileUploaderProps> = (props) => {
  return (
    <FileUploader
      {...props}
      overrides={{
        ButtonComponent: (props) => (
          <Button
            {...props}
            overrides={{
              BaseButton: {
                style: () => ({
                  backgroundColor: '#A4A4A4',
                  color: '#fff',
                  borderTopRightRadius: '2px',
                  borderTopLeftRadius: '2px',
                  borderBottomRightRadius: '2px',
                  borderBottomLeftRadius: '2px',
                  paddingTop: '3px',
                  paddingRight: '22px',
                  paddingBottom: '3px',
                  paddingLeft: '22px',
                  fontSize: '16px',
                  lineHeight: '20px',
                  ':hover': {
                    backgroundColor: '#A4A4A4',
                    color: '#fff',
                  },
                }),
              },
            }}
          >
            Upload
          </Button>
        ),
        FileDragAndDrop: {
          style: () => {
            return {
              backgroundColor: 'transparent',
              borderLeftColor: 'transparent',
              borderRightColor: 'transparent',
              borderTopColor: 'transparent',
              borderBottomColor: 'transparent',
            };
          },
        },
        ContentMessage: {
          style: () => {
            return {
              display: 'none',
            };
          },
        },
      }}
    />
  );
};

Answer 3

To change any text, you should use LocaleProvider: https://baseweb.design/guides/internationalization/

Overriding / replacing components should be the last resort.