LouisMazel
commented
2 weeks ago Hi @notedwin-dev,
If you are only using this component, you can change the border-radius size with a CSS variable:
:root {
--maz-border-radius: 0;
}Or, if you want just apply the rule to this component
<MazPhoneNumberInput style="--maz-border-radius: 0;" />As you can see in the "Theme" documentation, you can change a lot of things with these CSS variables: https://maz-ui.com/guide/theme#list-of-css-variables (border style, colors, dark mode colors, etc).
But yes I would like to make the components more customizable !
What do you want to customize in the components? what do you want to change in the components' UI? I can add more CSS variables :)
To only use one component
You just have to import the selected component like this :
Do
import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput'Nothing more.
Don't
import { MazPhoneNumberInput } from 'maz-ui/components'Let me know if it's good for you to close this issue
Is your feature request related to a problem? Please describe
I'm frustrated for one point - I can't fully customize the component itself. The css just doesn't match with my project. I want a more customizable component. Even though I can add style and classes, it doesnt affect the look of the component at all. I know you promoted MazUI as a Standalone components and tools for Vue & Nuxt, but please also make them customizable and provide a easier reading docs for the developers. You mentioned that I don't have to install the entire library and I can just install single components. I don't see any docs on that either.
Describe the solution you'd like
Please add the no-radius prop support fully for MazPhoneNumberInput because currently it sucks to not be able to customize the border radius.
Describe alternatives you've considered
I've considered using your old NPM package but my team and I don't want to risk using the old NPM package that might break in the future.
Additional context
--