I just don't understand how to change the size of the InputNumber component.

[mxtura]

I decided to try PrimeVue for the first time, but for three hours I haven't been able to figure out how to resize InputNumer. I understand that I'm not just redefining the primevue style, but how do I change the width anyway?

Here's mine main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config';
import MultiSelect from 'primevue/multiselect';
import InputNumber from 'primevue/inputnumber';
import Aura from '@primevue/themes/aura';

const app = createApp(App);
app.use(router);


app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            prefix: 'p',
            darkModeSelector: false ,
            cssLayer: {
                name: 'primevue',
                order: 'app-styles, primevue,'
            }
        }
    }
 });
app.component('p-multiSelect', MultiSelect); 
app.component('p-inputNumber', InputNumber);
app.mount('#app');

And that's where I use inputNumber.

<div class="filter-block year-range">
          <strong>Year:</strong>
          <div class="year-inputs">
            <label>from</label>
            <p-inputNumber
              v-model="minYear"
              class="year-field"
              :min="1900"
              :max="2025"
              :step="1"
            />
            <label>to</label>
            <p-inputNumber
              v-model="maxYear"
              class="year-field"
              :min="1900"
              :max="2025"
              :step="1"
            />
          </div>
        </div>

I can't do anything with styles. I even tried it that way:

.p-inputnumber input {
  width: 80px !important;
  font-size: 0.85rem !important;
  text-align: center !important;
}

.p-inputnumber {
  width: 80px !important;
  height: 40px !important;
}

.p-inputnumber .p-inputtext {
  height: 30px !important;
  font-size: 0.85rem !important;
  padding: 6px 8px !important;
}

Please help me, or I'll lose my mind soon.

---

UPD

Okay, I figured out how to solve this, but it still seems to me that there is a more adequate way.

const MyPreset = definePreset(Aura, {
    semantic: {
      primary: {
        50: '{indigo.50}',
        100: '{indigo.100}',
        200: '{indigo.200}',
        300: '{indigo.300}',
        400: '{indigo.400}',
        500: '{indigo.500}',
        600: '{indigo.600}',
        700: '{indigo.700}',
        800: '{indigo.800}',
        900: '{indigo.900}',
        950: '{indigo.950}'
      }
    },
    components: {
        inputnumber: {
            css: ({ dt }) => `
                .p-inputnumber input {
                    width: 50px;
                }
                
            `
        }
    },
  });

[juandiab]

Same issue here. It's a pain when you want to register hours and the form is killing the style.