css - 如何将一些 css 设置为 react NumPad 组件？

Question

我的代码中有一个 react numpad 组件，我需要更改它的大小，但我无法正确修改它CSS或theme类似的东西。

我已经意识到某些样式（例如颜色或字体）可能会在 中更改node_modules\react-numpad\build，但是诸如sizeoralign我无法更改。在查看以下模板代码后，请有人帮助我。

import NumPad from 'react-numpad';

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

当我们点击组件时，我们打开了小键盘。我需要这个小键盘比标准小键盘大得多。

Answer 1

您Numpad被动态添加到文档中。

你可以改变它的CSS。如果你检查它，你会得到一个带有MuiPaper-root类的元素，使用这个类名你可以改变它的CSS.

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

如果你想改变正在显示的数字的颜色，你可以这样做，

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

像这样你可以改变CSS任何你想要的。

注意：不要CSS直接在node_modules文件夹中更改任何内容，而是可以覆盖CSS自定义CSS文件中的。