如何修改Next UI Input输入框的字体大小？

Next UI的Input组件封装了原生input元素，直接给外层组件加style={{fontSize: '1.5rem'}}只会作用于组件容器，不会影响实际输入文本区域。以下是几种可行的解决方案：

方案1：Tailwind CSS嵌套选择器覆盖 #

利用Tailwind的嵌套选择器直接定位内部原生input元素，在className中添加对应样式：

<Input
    type="text"
    label="Type your word here"
    labelPlacement="inside"
    className='w-full sm:w-1/3 my-5 bg-transparent [&_input]:text-2xl' // text-2xl对应1.5rem
    variant='underlined'
    size='lg'
    description="Type the word you want to search for."
/>

如果需要调整内部label的字体大小，可追加[&_label]:text-xl这类选择器。

方案2：通过inputProps传递样式 #

Next UI Input支持inputProps属性，直接给内部原生input元素传入样式：

<Input
    type="text"
    label="Type your word here"
    labelPlacement="inside"
    className='w-full sm:w-1/3 my-5 bg-transparent'
    variant='underlined'
    size='lg'
    description="Type the word you want to search for."
    inputProps={{ style: { fontSize: '1.5rem' } }}
/>

方案3：自定义CSS类（全局/模块） #

如果需要更复杂的样式定义，可创建自定义CSS类：

.custom-input input {
    font-size: 1.5rem;
}

然后将该类添加到Input的className中：

<Input
    // 其他属性保持不变
    className='w-full sm:w-1/3 my-5 bg-transparent custom-input'
/>

内容的提问来源于stack exchange，提问作者Gyan Prakash