如何将一些 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 class 的元素，使用这个 class 名称你可以改变它的 CSS.

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

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

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

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

注意：不要直接在 node_modules 文件夹中更改任何 CSS，相反，您可以在自定义 CSS 文件.

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

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

css

reactjs

numpad