How can I set some css to a react NumPad component?

I have a react numpad component in my code and I need to change its size, but I cannot modify its CSS, theme or something like that properly.

I've already realized that some style like colors or fonts may be changed in node_modules\react-numpad\build, but omething like size or align I cannot change. Somebody help me, please , after looking to the following template code.

import NumPad from 'react-numpad';

<NumPad.Number
    onChange={(value) => { console.log('value', value)}}
    label={'Total'}
    placeholder={'my placeholder'}
    value={100}
    decimal={2}
/>

When we click on the component, we get the numpad open. I need this numpad to be something much bigger than the standard one.

Your Numpad is dynamically added to the document.

You can change it's CSS. If you inspect it, you will get a element with MuiPaper-root class, using this class name you can change it's CSS.

.MuiPaper-root{
    width: 500px;
    height: 500px;
    font-size: 25px;    
}

If you want to change color of number being displayed you can do this,

.MuiPaper-root .MuiButtonBase-root{
    color:blue;
}

Like this you can change CSS for whatever you want.

Note: Don't change any CSS directly in node_modules folder, instead you can override the CSS in your custom CSS file.