3

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.

Maf
  • 696
  • 1
  • 8
  • 23

1 Answers1

2

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.

ravibagul91
  • 20,072
  • 5
  • 36
  • 59
  • Sorry, where can I find this `MuiPaper-root`. I could not find in the build folder. – Maf Aug 13 '19 at 17:03
  • After I override the `MuiPaper-root` class in my css, should I define the component like the following? ` – Maf Aug 13 '19 at 17:07
  • When your Numpad open, it add's div dynamically which contains class name `MuiPaper-root`. You don't have to explicitly write the class name. – ravibagul91 Aug 13 '19 at 17:28
  • When Numpad is open you can right click on that to inspect the element and you can see the div with `MuiPaper-root` added to document. – ravibagul91 Aug 13 '19 at 17:30
  • It is pre defined class nam you just need to add css given above in your css file – ravibagul91 Aug 13 '19 at 17:30