Customize Input Box , Text Input in Mantine UI

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>

About the Author: smartcoder

You might like

Leave a Reply

Your email address will not be published. Required fields are marked *