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

Question

试图覆盖文件上传器的按钮文本，但ButtonComponent.props有any类型，所以无法弄清楚我能在那里传递什么。我受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道具的奇怪例外。

看看这个最小的例子。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;

原因可以在实现中找到：

1. FileUploader在这里给出Button覆盖道具
2. Buttonifself 将自己的 props ( this.props) 传递到ButtonInternals 这里
3. ButtonInternals在这里渲染它children和其他一些东西

但是 FileUploader传递{locale.fileuploader.browseFiles}给Buttonas children here，它位于 the 之后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/

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