How to add custom css style for input box , texfields in mantine UI.
Mantine UI text box css customize, change the border color, increase input box sizes.
<Paper shadow="sm"
style={{padding: '30px'}}
className={classes.inputBox}
>
<Input
placeholder="Enter your answer"
value={response || ""}
onChange={(e) => updateResponse(e.currentTarget.value)}
sx={{ width: '70vw', maxWidth: "400px" }}
variant="unstyled"
radius="xl"
size="sm"
styles={(theme) => ({
input: {
borderColor: theme.colors.yellow[theme.fn.primaryShade()],
borderWidth: 1,
borderStyle: 'solid',
},
})}
/>
</Paper>