覆盖 BaseWeb 的文件上传器按钮标签文本

Question

试图覆盖 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 是设置 children 属性，但按钮文本保持不变。谁能给个提示？

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

我怀疑您是否可以不覆盖整个组件。这是 children 道具的奇怪例外。

看看this minimal example。 startEnhancer会被尊重，children不会：

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;

执行中可以找到原因：

FileUploader 给出 Button 覆盖道具 here
Button ifself 将自己的 props (this.props) 传递给 ButtonInternals here
ButtonInternals 呈现它的 children 和一些其他东西 here

但是 FileUploader 将 {locale.fileuploader.browseFiles} 作为 children here 传递给了 Button，这是在overrides（因此覆盖覆盖...）

您可能想要提交错误报告（因此 children 被放在 FileUploader 中的覆盖道具之前）或只是覆盖整个按钮组件。

Answer 2

在接受的答案的帮助下，我想出了如何覆盖按钮组件。本来我认为这是不可能的（由于组件丢失点击处理程序），但props实际上是携带它，所以我们可以使用<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

要更改任何文本，您应该使用 LocaleProvider：https://baseweb.design/guides/internationalization/

覆盖/替换组件应该是最后的手段。

覆盖 BaseWeb 的文件上传器按钮标签文本

Override BaseWeb's File Uploader button label text

reactjs

baseweb