Customize the open button

import { Viewer } from '@react-pdf-viewer/core';
import { openPlugin, RenderOpenProps } from '@react-pdf-viewer/open';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/open/lib/styles/index.css';

const openPluginInstance = openPlugin();
const { Open } = openPluginInstance;

// Your render function
<Open>
    {(props: RenderOpenProps) => (
        <div
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
                position: 'relative',
            }}
        >
            <input
                type="file"
                onChange={(e) => props.onClick(e)}
                style={{
                    bottom: 0,
                    cursor: 'pointer',
                    height: '100%',
                    left: 0,
                    opacity: 0,
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    width: '100%',
                }}
            />
            Open file
        </div>
    )}
</Open>;