重写BaseWeb的按钮标签文本

Question

试图重写文件Uploader's按钮文本，但ButtonComponent.props有any类型，因此无法确定我能够传递到那里的内容。我受按钮文档启发的想法是设置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. Button ifself将自己的道具(this.props)传递给ButtonInternals 这里
3. ButtonInternals呈现它的children和其他一些东西( 这里 )

但是 FileUploader将{locale.fileuploader.browseFiles}传递给Button作为children 这里，这是在overrides之后(因此重写了.)

您可能想要提交一个bug报告(因此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/

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