Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

API to override input sizes

See original GitHub issue

Hi,

I am redesigning Mantine components as per our organization’s design system. I want to change the height & padding of all input elements to match our design guidelines. e.g.

height of buttons for

‘sm’ size should be 32 instead of the default 36
‘md’ size should be 40 instead of the default 42

I found that there’s is const defined in the code under https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/components/Input/Input.styles.ts

export const sizes = { xs: 30, sm: 36, md: 42, lg: 50, xl: 60, }; Is there a way to override these sizes through Styles API? I want to have something similar to below snippet.

export const Styles = {
  Button: (theme: MantineTheme) => ({
    // root: {
      // [if(ButtonSize === 'lg')]: { height: 48 },
      // [if(ButtonSize === 'md')]: { height: 40 },
      // [if(ButtonSize === 'sm')]: { height: 32 },
    // },
    filled: {
      backgroundColor: theme.colors.blue[5],
      '&:hover': {
        backgroundColor: theme.colors.blue[6],
      },
    },
    outline: {
      borderColor: theme.colors.blue[5],
      color: theme.colors.blue[5],
      '&:hover': {
        backgroundColor: theme.colors.blue[0],
      },
    },
  }),
};

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

holzenburgcommented, Nov 9, 2022

@rtivital We also need this API feature and offer to implement it. Are you ok with that?

0reactions

activenodecommented, Nov 9, 2022

Understood

Top Results From Across the Web

Can CSS over-rule HTML input size declarations

CSS can override the size attribute using width . There's a good explanation about it here. Here, we have a typical input, size...

Use a mapping template to override an API's request and ...

Tutorial: Override an API's request parameters and headers with the API Gateway console · Under APIs, choose the PetStore API. · In the...

Retrieve Prompt Override (QPTRTVPO) API

The Retrieve Prompt Override (QPTRTVPO) API calls the prompt override program for a specified command and returns the prompt override command string from ......

Input API - Material UI

Name Type Default autoComplete string autoFocus bool false classes object

<input>: The Input (Form Input) element - HTML

Valid for email , password , tel , url , and text , the size attribute specifies how much of the input is...