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

Question

我的代码中有一个 React 小键盘组件，我需要更改它的大小，但我无法正确修改它的 CSS、theme 或类似内容。

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

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。

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