Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use ComponentsProps method in storybook-root
Best JavaScript code snippet using storybook-root
ChromaComponents.ts
Source:ChromaComponents.ts 
1import { ComponentsProps } from './ChromaProps';2import {3 ChromaOverrides as ChromaComponentsOverrides,4 ChromaComponentNameToClassKey,5} from './ChromaOverrides';6import { Theme } from '../createTheme';7import { Interpolation } from '@mui/material';8import { Components as MuiComponents } from '@mui/material/styles';9import {10 AlertStylesKey,11 AlertActionsRowStylesKey,12 AlertBodyStylesKey,13 AlertIconStylesKey,14} from '../../components/Alert';15import { AvatarStylesKey } from '../../components/Avatar';16import { BoxStylesKey } from '../../components/Box';17import {18 BreadcrumbNavStylesKey,19 BreadcrumbsStylesKey,20 BreadcrumbStylesKey,21} from '../../components/Breadcrumbs';22import { ButtonStylesKey } from '../../components/Button/index';23import { ButtonFloatStylesKey } from '../../components/ButtonFloat';24import { ButtonFilePickerStylesKey } from '../../components/ButtonFilePicker';25import { ButtonLinkStylesKey } from '../../components/ButtonLink/index';26import { CheckboxStylesKey } from '../../components/Checkbox';27import { ChipStylesKey } from '../../components/Chip';28import { DividerStylesKey } from '../../components/Divider';29import { DotLoaderStylesKey } from '../../components/DotLoader';30import { ExpansionPanelStylesKey } from '../../components/ExpansionPanel';31import { FormBoxStylesKey } from '../../components/FormBox';32import { HeaderStylesKey } from '../../components/Header';33import { IconButtonStylesKey } from '../../components/IconButton';34import { IconButtonFloatStylesKey } from '../../components/IconButtonFloat';35import { IconButtonLinkStylesKey } from '../../components/IconButtonLink';36import { IconTileStylesKey } from '../../components/IconTile';37import { KeymapHelpStylesKey } from '../../components/KeymapHelp';38import { LayoutManagerStylesKey } from '../../components/LayoutManager';39import { LinearProgressStylesKey } from '../../components/LinearProgress';40import { LinkStylesKey } from '../../components/Link';41import {42 MenuButtonStylesKey,43 MenuItemStylesKey,44 MenuStylesKey,45} from '../../components/Menu';46import { ModalActionsStylesKey, ModalStylesKey } from '../../components/Modal';47import { PageHeaderStylesKey } from '../../components/PageHeader';48import { PageLayoutStylesKey } from '../../components/PageLayout';49import { PaperStylesKey } from '../../components/Paper';50import { PillStylesKey } from '../../components/Pill';51import {52 PopoverActionsStylesKey,53 PopoverListStylesKey,54 PopoverItemStylesKey,55 PopoverContentStylesKey,56 PopoverStylesKey,57} from '../../components/Popover';58import {59 PrimaryNavigationExpansionItemStylesKey,60 PrimaryNavigationItemStylesKey,61 PrimaryNavigationStylesKey,62 PrimaryNavigationSubItemStylesKey,63} from '../../components/PrimaryNavigation';64import {65 RadioGroupMinimalStylesKey,66 RadioStylesKey,67} from '../../components/Radio';68import { SearchFieldStylesKey } from '../../components/SearchField';69import {70 SecondaryNavigationItemStylesKey,71 SecondaryNavigationStylesKey,72} from '../../components/SecondaryNavigation';73import {74 GroupHeadingStylesKey,75 SelectOptionStylesKey,76 SelectStylesKey,77 RoverOptionStylesKey,78} from '../../components/Select';79import {80 SlideOverStylesKey,81 ActionsStylesKey as SlideOverActionsStylesKey,82 BodyStylesKey as SlideOverBodyStylesKey,83 HeaderStylesKey as SlideOverHeaderStylesKey,84} from '../../components/SlideOver';85import { SmallTileStylesKey } from '../../components/SmallTile';86import { SnackbarStylesKey } from '../../components/Snackbar';87import {88 StepConnectorStylesKey,89 StepperStylesKey,90 StepStylesKey,91} from '../../components/Stepper';92import {93 TableActionDividerStylesKey,94 TableModuleStylesKey,95} from '../../components/TableModule';96import {97 TabListStylesKey,98 TabPanelStylesKey,99 TabStylesKey,100} from '../../components/Tabs';101import { TextStylesKey } from '../../components/Text';102import { TextAreaStylesKey } from '../../components/TextArea';103import { TextFieldStylesKey } from '../../components/TextField';104import { ToggleStylesKey } from '../../components/Toggle';105import { TooltipStylesKey } from '../../components/Tooltip';106import {107 UnitNumberFormatFieldStylesKey,108 PhoneNumberFormatFieldStylesKey,109} from '../../components/NumberFormat';110import { ButtonUnstyledStylesKey } from '../../components/ButtonUnstyled';111import { ColorPickerStylesKey } from '../../components/ColorPicker';112import { SkeletonStylesKey } from '../../components/Skeleton';113import { SliderStylesKey } from '../../components/Slider';114import { DayPickerStylesKey } from '../../components/DayPicker';115export interface Components116 extends MuiComponents<Theme>,117 ChromaComponents<Theme> {}118export type ComponentsVariants = {119 [Name in keyof ChromaComponentNameToClassKey]?: Array<{120 props: Partial<ComponentsProps[Name]>;121 style: Interpolation<{ theme: Theme }>;122 }>;123};124export type ChromaComponents<Theme> = {125 [AlertStylesKey]?: {126 defaultProps?: ComponentsProps[typeof AlertStylesKey];127 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof AlertStylesKey];128 variants?: ComponentsVariants[typeof AlertStylesKey];129 };130 [AlertActionsRowStylesKey]?: {131 defaultProps?: ComponentsProps[typeof AlertActionsRowStylesKey];132 styleOverrides?: ChromaComponentsOverrides<133 Theme134 >[typeof AlertActionsRowStylesKey];135 variants?: ComponentsVariants[typeof AlertActionsRowStylesKey];136 };137 [AlertBodyStylesKey]?: {138 defaultProps?: ComponentsProps[typeof AlertBodyStylesKey];139 styleOverrides?: ChromaComponentsOverrides<140 Theme141 >[typeof AlertBodyStylesKey];142 variants?: ComponentsVariants[typeof AlertBodyStylesKey];143 };144 [AlertIconStylesKey]?: {145 defaultProps?: ComponentsProps[typeof AlertIconStylesKey];146 styleOverrides?: ChromaComponentsOverrides<147 Theme148 >[typeof AlertIconStylesKey];149 variants?: ComponentsVariants[typeof AlertIconStylesKey];150 };151 [AvatarStylesKey]?: {152 defaultProps?: ComponentsProps[typeof AvatarStylesKey];153 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof AvatarStylesKey];154 variants?: ComponentsVariants[typeof AvatarStylesKey];155 };156 [BoxStylesKey]?: {157 defaultProps?: ComponentsProps[typeof BoxStylesKey];158 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof BoxStylesKey];159 variants?: ComponentsVariants[typeof BoxStylesKey];160 };161 [BreadcrumbNavStylesKey]?: {162 defaultProps?: ComponentsProps[typeof BreadcrumbNavStylesKey];163 styleOverrides?: ChromaComponentsOverrides<164 Theme165 >[typeof BreadcrumbNavStylesKey];166 variants?: ComponentsVariants[typeof BreadcrumbNavStylesKey];167 };168 [BreadcrumbsStylesKey]?: {169 defaultProps?: ComponentsProps[typeof BreadcrumbsStylesKey];170 styleOverrides?: ChromaComponentsOverrides<171 Theme172 >[typeof BreadcrumbsStylesKey];173 variants?: ComponentsVariants[typeof BreadcrumbsStylesKey];174 };175 [BreadcrumbStylesKey]?: {176 defaultProps?: ComponentsProps[typeof BreadcrumbStylesKey];177 styleOverrides?: ChromaComponentsOverrides<178 Theme179 >[typeof BreadcrumbStylesKey];180 variants?: ComponentsVariants[typeof BreadcrumbStylesKey];181 };182 [ButtonFloatStylesKey]?: {183 defaultProps?: ComponentsProps[typeof ButtonFloatStylesKey];184 styleOverrides?: ChromaComponentsOverrides<185 Theme186 >[typeof ButtonFloatStylesKey];187 variants?: ComponentsVariants[typeof ButtonFloatStylesKey];188 };189 [ButtonFilePickerStylesKey]?: {190 defaultProps?: ComponentsProps[typeof ButtonFilePickerStylesKey];191 styleOverrides?: ChromaComponentsOverrides<192 Theme193 >[typeof ButtonFilePickerStylesKey];194 variants?: ComponentsVariants[typeof ButtonFilePickerStylesKey];195 };196 [ButtonLinkStylesKey]?: {197 defaultProps?: ComponentsProps[typeof ButtonLinkStylesKey];198 styleOverrides?: ChromaComponentsOverrides<199 Theme200 >[typeof ButtonLinkStylesKey];201 variants?: ComponentsVariants[typeof ButtonLinkStylesKey];202 };203 [ButtonStylesKey]?: {204 defaultProps?: ComponentsProps[typeof ButtonStylesKey];205 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof ButtonStylesKey];206 variants?: ComponentsVariants[typeof ButtonStylesKey];207 };208 [ButtonUnstyledStylesKey]?: {209 defaultProps?: ComponentsProps[typeof ButtonUnstyledStylesKey];210 styleOverrides?: ChromaComponentsOverrides<211 Theme212 >[typeof ButtonUnstyledStylesKey];213 variants?: ComponentsVariants[typeof ButtonUnstyledStylesKey];214 };215 [CheckboxStylesKey]?: {216 defaultProps?: ComponentsProps[typeof CheckboxStylesKey];217 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof CheckboxStylesKey];218 variants?: ComponentsVariants[typeof CheckboxStylesKey];219 };220 [ChipStylesKey]?: {221 defaultProps?: ComponentsProps[typeof ChipStylesKey];222 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof ChipStylesKey];223 variants?: ComponentsVariants[typeof ChipStylesKey];224 };225 [ColorPickerStylesKey]?: {226 defaultProps?: ComponentsProps[typeof ColorPickerStylesKey];227 styleOverrides?: ChromaComponentsOverrides<228 Theme229 >[typeof ColorPickerStylesKey];230 variants?: ComponentsVariants[typeof ColorPickerStylesKey];231 };232 [DayPickerStylesKey]?: {233 defaultProps?: ComponentsProps[typeof DayPickerStylesKey];234 styleOverrides?: ChromaComponentsOverrides<235 Theme236 >[typeof DayPickerStylesKey];237 variants?: ComponentsVariants[typeof DayPickerStylesKey];238 };239 [DividerStylesKey]?: {240 defaultProps?: ComponentsProps[typeof DividerStylesKey];241 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof DividerStylesKey];242 variants?: ComponentsVariants[typeof DividerStylesKey];243 };244 [DotLoaderStylesKey]?: {245 defaultProps?: ComponentsProps[typeof DotLoaderStylesKey];246 styleOverrides?: ChromaComponentsOverrides<247 Theme248 >[typeof DotLoaderStylesKey];249 variants?: ComponentsVariants[typeof DotLoaderStylesKey];250 };251 [ExpansionPanelStylesKey]?: {252 defaultProps?: ComponentsProps[typeof ExpansionPanelStylesKey];253 styleOverrides?: ChromaComponentsOverrides<254 Theme255 >[typeof ExpansionPanelStylesKey];256 variants?: ComponentsVariants[typeof ExpansionPanelStylesKey];257 };258 [FormBoxStylesKey]?: {259 defaultProps?: ComponentsProps[typeof FormBoxStylesKey];260 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof FormBoxStylesKey];261 variants?: ComponentsVariants[typeof FormBoxStylesKey];262 };263 [GroupHeadingStylesKey]?: {264 defaultProps?: ComponentsProps[typeof GroupHeadingStylesKey];265 styleOverrides?: ChromaComponentsOverrides<266 Theme267 >[typeof GroupHeadingStylesKey];268 variants?: ComponentsVariants[typeof GroupHeadingStylesKey];269 };270 [HeaderStylesKey]?: {271 defaultProps?: ComponentsProps[typeof HeaderStylesKey];272 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof HeaderStylesKey];273 variants?: ComponentsVariants[typeof HeaderStylesKey];274 };275 [IconButtonStylesKey]?: {276 defaultProps?: ComponentsProps[typeof IconButtonStylesKey];277 styleOverrides?: ChromaComponentsOverrides<278 Theme279 >[typeof IconButtonStylesKey];280 variants?: ComponentsVariants[typeof IconButtonStylesKey];281 };282 [IconButtonFloatStylesKey]?: {283 defaultProps?: ComponentsProps[typeof IconButtonFloatStylesKey];284 styleOverrides?: ChromaComponentsOverrides<285 Theme286 >[typeof IconButtonFloatStylesKey];287 variants?: ComponentsVariants[typeof IconButtonFloatStylesKey];288 };289 [IconButtonLinkStylesKey]?: {290 defaultProps?: ComponentsProps[typeof IconButtonLinkStylesKey];291 styleOverrides?: ChromaComponentsOverrides<292 Theme293 >[typeof IconButtonLinkStylesKey];294 variants?: ComponentsVariants[typeof IconButtonLinkStylesKey];295 };296 [IconTileStylesKey]?: {297 defaultProps?: ComponentsProps[typeof IconTileStylesKey];298 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof IconTileStylesKey];299 variants?: ComponentsVariants[typeof IconTileStylesKey];300 };301 [KeymapHelpStylesKey]?: {302 defaultProps?: ComponentsProps[typeof KeymapHelpStylesKey];303 styleOverrides?: ChromaComponentsOverrides<304 Theme305 >[typeof KeymapHelpStylesKey];306 variants?: ComponentsVariants[typeof KeymapHelpStylesKey];307 };308 [LayoutManagerStylesKey]?: {309 defaultProps?: ComponentsProps[typeof LayoutManagerStylesKey];310 styleOverrides?: ChromaComponentsOverrides<311 Theme312 >[typeof LayoutManagerStylesKey];313 variants?: ComponentsVariants[typeof LayoutManagerStylesKey];314 };315 [LinearProgressStylesKey]?: {316 defaultProps?: ComponentsProps[typeof LinearProgressStylesKey];317 styleOverrides?: ChromaComponentsOverrides<318 Theme319 >[typeof LinearProgressStylesKey];320 variants?: ComponentsVariants[typeof LinearProgressStylesKey];321 };322 [LinkStylesKey]?: {323 defaultProps?: ComponentsProps[typeof LinkStylesKey];324 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof LinkStylesKey];325 variants?: ComponentsVariants[typeof LinkStylesKey];326 };327 [MenuButtonStylesKey]?: {328 defaultProps?: ComponentsProps[typeof MenuButtonStylesKey];329 styleOverrides?: ChromaComponentsOverrides<330 Theme331 >[typeof MenuButtonStylesKey];332 variants?: ComponentsVariants[typeof MenuButtonStylesKey];333 };334 [MenuItemStylesKey]?: {335 defaultProps?: ComponentsProps[typeof MenuItemStylesKey];336 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof MenuItemStylesKey];337 variants?: ComponentsVariants[typeof MenuItemStylesKey];338 };339 [MenuStylesKey]?: {340 defaultProps?: ComponentsProps[typeof MenuStylesKey];341 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof MenuStylesKey];342 variants?: ComponentsVariants[typeof MenuStylesKey];343 };344 [ModalActionsStylesKey]?: {345 defaultProps?: ComponentsProps[typeof ModalActionsStylesKey];346 styleOverrides?: ChromaComponentsOverrides<347 Theme348 >[typeof ModalActionsStylesKey];349 variants?: ComponentsVariants[typeof ModalActionsStylesKey];350 };351 [ModalStylesKey]?: {352 defaultProps?: ComponentsProps[typeof ModalStylesKey];353 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof ModalStylesKey];354 variants?: ComponentsVariants[typeof ModalStylesKey];355 };356 [PageHeaderStylesKey]?: {357 defaultProps?: ComponentsProps[typeof PageHeaderStylesKey];358 styleOverrides?: ChromaComponentsOverrides<359 Theme360 >[typeof PageHeaderStylesKey];361 variants?: ComponentsVariants[typeof PageHeaderStylesKey];362 };363 [PageLayoutStylesKey]?: {364 defaultProps?: ComponentsProps[typeof PageLayoutStylesKey];365 styleOverrides?: ChromaComponentsOverrides<366 Theme367 >[typeof PageLayoutStylesKey];368 variants?: ComponentsVariants[typeof PageLayoutStylesKey];369 };370 [PaperStylesKey]?: {371 defaultProps?: ComponentsProps[typeof PaperStylesKey];372 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof PaperStylesKey];373 variants?: ComponentsVariants[typeof PaperStylesKey];374 };375 [PhoneNumberFormatFieldStylesKey]?: {376 defaultProps?: ComponentsProps[typeof PhoneNumberFormatFieldStylesKey];377 styleOverrides?: ChromaComponentsOverrides<378 Theme379 >[typeof PhoneNumberFormatFieldStylesKey];380 variants?: ComponentsVariants[typeof PhoneNumberFormatFieldStylesKey];381 };382 [PillStylesKey]?: {383 defaultProps?: ComponentsProps[typeof PillStylesKey];384 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof PillStylesKey];385 variants?: ComponentsVariants[typeof PillStylesKey];386 };387 [PopoverActionsStylesKey]?: {388 defaultProps?: ComponentsProps[typeof PopoverActionsStylesKey];389 styleOverrides?: ChromaComponentsOverrides<390 Theme391 >[typeof PopoverActionsStylesKey];392 variants?: ComponentsVariants[typeof PopoverActionsStylesKey];393 };394 [PopoverStylesKey]?: {395 defaultProps?: ComponentsProps[typeof PopoverStylesKey];396 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof PopoverStylesKey];397 variants?: ComponentsVariants[typeof PopoverStylesKey];398 };399 [PopoverContentStylesKey]?: {400 defaultProps?: ComponentsProps[typeof PopoverContentStylesKey];401 styleOverrides?: ChromaComponentsOverrides<402 Theme403 >[typeof PopoverContentStylesKey];404 variants?: ComponentsVariants[typeof PopoverContentStylesKey];405 };406 [PopoverItemStylesKey]?: {407 defaultProps?: ComponentsProps[typeof PopoverItemStylesKey];408 styleOverrides?: ChromaComponentsOverrides<409 Theme410 >[typeof PopoverItemStylesKey];411 variants?: ComponentsVariants[typeof PopoverItemStylesKey];412 };413 [PopoverListStylesKey]?: {414 defaultProps?: ComponentsProps[typeof PopoverListStylesKey];415 styleOverrides?: ChromaComponentsOverrides<416 Theme417 >[typeof PopoverListStylesKey];418 variants?: ComponentsVariants[typeof PopoverListStylesKey];419 };420 [PrimaryNavigationExpansionItemStylesKey]?: {421 defaultProps?: ComponentsProps[typeof PrimaryNavigationExpansionItemStylesKey];422 styleOverrides?: ChromaComponentsOverrides<423 Theme424 >[typeof PrimaryNavigationExpansionItemStylesKey];425 variants?: ComponentsVariants[typeof PrimaryNavigationExpansionItemStylesKey];426 };427 [PrimaryNavigationItemStylesKey]?: {428 defaultProps?: ComponentsProps[typeof PrimaryNavigationItemStylesKey];429 styleOverrides?: ChromaComponentsOverrides<430 Theme431 >[typeof PrimaryNavigationItemStylesKey];432 variants?: ComponentsVariants[typeof PrimaryNavigationItemStylesKey];433 };434 [PrimaryNavigationStylesKey]?: {435 defaultProps?: ComponentsProps[typeof PrimaryNavigationStylesKey];436 styleOverrides?: ChromaComponentsOverrides<437 Theme438 >[typeof PrimaryNavigationStylesKey];439 variants?: ComponentsVariants[typeof PrimaryNavigationStylesKey];440 };441 [PrimaryNavigationSubItemStylesKey]?: {442 defaultProps?: ComponentsProps[typeof PrimaryNavigationSubItemStylesKey];443 styleOverrides?: ChromaComponentsOverrides<444 Theme445 >[typeof PrimaryNavigationSubItemStylesKey];446 variants?: ComponentsVariants[typeof PrimaryNavigationSubItemStylesKey];447 };448 [RadioStylesKey]?: {449 defaultProps?: ComponentsProps[typeof RadioStylesKey];450 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof RadioStylesKey];451 variants?: ComponentsVariants[typeof RadioStylesKey];452 };453 [RadioGroupMinimalStylesKey]?: {454 defaultProps?: ComponentsProps[typeof RadioGroupMinimalStylesKey];455 styleOverrides?: ChromaComponentsOverrides<456 Theme457 >[typeof RadioGroupMinimalStylesKey];458 variants?: ComponentsVariants[typeof RadioGroupMinimalStylesKey];459 };460 [RoverOptionStylesKey]?: {461 defaultProps?: ComponentsProps[typeof RoverOptionStylesKey];462 styleOverrides?: ChromaComponentsOverrides<463 Theme464 >[typeof RoverOptionStylesKey];465 variants?: ComponentsVariants[typeof RoverOptionStylesKey];466 };467 [SearchFieldStylesKey]?: {468 defaultProps?: ComponentsProps[typeof SearchFieldStylesKey];469 styleOverrides?: ChromaComponentsOverrides<470 Theme471 >[typeof SearchFieldStylesKey];472 variants?: ComponentsVariants[typeof SearchFieldStylesKey];473 };474 [SecondaryNavigationItemStylesKey]?: {475 defaultProps?: ComponentsProps[typeof SecondaryNavigationItemStylesKey];476 styleOverrides?: ChromaComponentsOverrides<477 Theme478 >[typeof SecondaryNavigationItemStylesKey];479 variants?: ComponentsVariants[typeof SecondaryNavigationItemStylesKey];480 };481 [SecondaryNavigationStylesKey]?: {482 defaultProps?: ComponentsProps[typeof SecondaryNavigationStylesKey];483 styleOverrides?: ChromaComponentsOverrides<484 Theme485 >[typeof SecondaryNavigationStylesKey];486 variants?: ComponentsVariants[typeof SecondaryNavigationStylesKey];487 };488 [SelectOptionStylesKey]?: {489 defaultProps?: ComponentsProps[typeof SelectOptionStylesKey];490 styleOverrides?: ChromaComponentsOverrides<491 Theme492 >[typeof SelectOptionStylesKey];493 variants?: ComponentsVariants[typeof SelectOptionStylesKey];494 };495 [SelectStylesKey]?: {496 defaultProps?: ComponentsProps[typeof SelectStylesKey];497 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof SelectStylesKey];498 variants?: ComponentsVariants[typeof SelectStylesKey];499 };500 [SkeletonStylesKey]?: {501 defaultProps?: ComponentsProps[typeof SkeletonStylesKey];502 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof SkeletonStylesKey];503 variants?: ComponentsVariants[typeof SkeletonStylesKey];504 };505 [SliderStylesKey]?: {506 defaultProps?: ComponentsProps[typeof SliderStylesKey];507 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof SliderStylesKey];508 variants?: ComponentsVariants[typeof SliderStylesKey];509 };510 [SlideOverStylesKey]?: {511 defaultProps?: ComponentsProps[typeof SlideOverStylesKey];512 styleOverrides?: ChromaComponentsOverrides<513 Theme514 >[typeof SlideOverStylesKey];515 variants?: ComponentsVariants[typeof SlideOverStylesKey];516 };517 [SlideOverActionsStylesKey]?: {518 defaultProps?: ComponentsProps[typeof SlideOverActionsStylesKey];519 styleOverrides?: ChromaComponentsOverrides<520 Theme521 >[typeof SlideOverActionsStylesKey];522 variants?: ComponentsVariants[typeof SlideOverActionsStylesKey];523 };524 [SlideOverBodyStylesKey]?: {525 defaultProps?: ComponentsProps[typeof SlideOverBodyStylesKey];526 styleOverrides?: ChromaComponentsOverrides<527 Theme528 >[typeof SlideOverBodyStylesKey];529 variants?: ComponentsVariants[typeof SlideOverBodyStylesKey];530 };531 [SlideOverHeaderStylesKey]?: {532 defaultProps?: ComponentsProps[typeof SlideOverHeaderStylesKey];533 styleOverrides?: ChromaComponentsOverrides<534 Theme535 >[typeof SlideOverHeaderStylesKey];536 variants?: ComponentsVariants[typeof SlideOverHeaderStylesKey];537 };538 [SmallTileStylesKey]?: {539 defaultProps?: ComponentsProps[typeof SmallTileStylesKey];540 styleOverrides?: ChromaComponentsOverrides<541 Theme542 >[typeof SmallTileStylesKey];543 variants?: ComponentsVariants[typeof SmallTileStylesKey];544 };545 [SnackbarStylesKey]?: {546 defaultProps?: ComponentsProps[typeof SnackbarStylesKey];547 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof SnackbarStylesKey];548 variants?: ComponentsVariants[typeof SnackbarStylesKey];549 };550 [StepperStylesKey]?: {551 defaultProps?: ComponentsProps[typeof StepperStylesKey];552 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof StepperStylesKey];553 variants?: ComponentsVariants[typeof StepperStylesKey];554 };555 [StepStylesKey]?: {556 defaultProps?: ComponentsProps[typeof StepStylesKey];557 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof StepStylesKey];558 variants?: ComponentsVariants[typeof StepStylesKey];559 };560 [StepConnectorStylesKey]?: {561 defaultProps?: ComponentsProps[typeof StepConnectorStylesKey];562 styleOverrides?: ChromaComponentsOverrides<563 Theme564 >[typeof StepConnectorStylesKey];565 variants?: ComponentsVariants[typeof StepConnectorStylesKey];566 };567 [TableActionDividerStylesKey]?: {568 defaultProps?: ComponentsProps[typeof TableActionDividerStylesKey];569 styleOverrides?: ChromaComponentsOverrides<570 Theme571 >[typeof TableActionDividerStylesKey];572 variants?: ComponentsVariants[typeof TableActionDividerStylesKey];573 };574 [TableModuleStylesKey]?: {575 defaultProps?: ComponentsProps[typeof TableModuleStylesKey];576 styleOverrides?: ChromaComponentsOverrides<577 Theme578 >[typeof TableModuleStylesKey];579 variants?: ComponentsVariants[typeof TableModuleStylesKey];580 };581 [TabListStylesKey]?: {582 defaultProps?: ComponentsProps[typeof TabListStylesKey];583 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof TabListStylesKey];584 variants?: ComponentsVariants[typeof TabListStylesKey];585 };586 [TabPanelStylesKey]?: {587 defaultProps?: ComponentsProps[typeof TabPanelStylesKey];588 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof TabPanelStylesKey];589 variants?: ComponentsVariants[typeof TabPanelStylesKey];590 };591 [TabStylesKey]?: {592 defaultProps?: ComponentsProps[typeof TabStylesKey];593 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof TabStylesKey];594 variants?: ComponentsVariants[typeof TabStylesKey];595 };596 [TextStylesKey]?: {597 defaultProps?: ComponentsProps[typeof TextStylesKey];598 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof TextStylesKey];599 variants?: ComponentsVariants[typeof TextStylesKey];600 };601 [TextAreaStylesKey]?: {602 defaultProps?: ComponentsProps[typeof TextAreaStylesKey];603 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof TextAreaStylesKey];604 variants?: ComponentsVariants[typeof TextAreaStylesKey];605 };606 [TextFieldStylesKey]?: {607 defaultProps?: ComponentsProps[typeof TextFieldStylesKey];608 styleOverrides?: ChromaComponentsOverrides<609 Theme610 >[typeof TextFieldStylesKey];611 variants?: ComponentsVariants[typeof TextFieldStylesKey];612 };613 [ToggleStylesKey]?: {614 defaultProps?: ComponentsProps[typeof ToggleStylesKey];615 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof ToggleStylesKey];616 variants?: ComponentsVariants[typeof ToggleStylesKey];617 };618 [TooltipStylesKey]?: {619 defaultProps?: ComponentsProps[typeof TooltipStylesKey];620 styleOverrides?: ChromaComponentsOverrides<Theme>[typeof TooltipStylesKey];621 variants?: ComponentsVariants[typeof TooltipStylesKey];622 };623 [UnitNumberFormatFieldStylesKey]?: {624 defaultProps?: ComponentsProps[typeof UnitNumberFormatFieldStylesKey];625 styleOverrides?: ChromaComponentsOverrides<626 Theme627 >[typeof UnitNumberFormatFieldStylesKey];628 variants?: ComponentsVariants[typeof UnitNumberFormatFieldStylesKey];629 };...
components.ts
Source:components.ts
1import { AvatarProps, AvatarStyles } from '../Avatar';2import { AvatarGroupProps, AvatarGroupStyles } from '../AvatarGroup';3import { ButtonStyles } from '../Button';4import { ButtonProps } from '../Button/Button.types';5import { TypographyProps, TypographyStyles } from '../Typography';6import { Theme } from './theme/Theme';7export interface Components {8 // MuiAlert?: {9 // defaultProps?: ComponentsProps['MuiAlert'];10 // styleOverrides?: ComponentsOverrides['MuiAlert'];11 // variants?: ComponentsVariants['MuiAlert'];12 // };13 // MuiAlertTitle?: {14 // defaultProps?: ComponentsProps['MuiAlertTitle'];15 // styleOverrides?: ComponentsOverrides['MuiAlertTitle'];16 // };17 // MuiAppBar?: {18 // defaultProps?: ComponentsProps['MuiAppBar'];19 // styleOverrides?: ComponentsOverrides['MuiAppBar'];20 // };21 // MuiAutocomplete?: {22 // defaultProps?: ComponentsProps['MuiAutocomplete'];23 // styleOverrides?: ComponentsOverrides['MuiAutocomplete'];24 // };25 MuiAvatar?: {26 defaultProps?: Omit<AvatarProps, 'children'>; // ComponentsProps['MuiAvatar'];27 createStyles?: (theme: Theme, props: AvatarProps) => Partial<AvatarStyles>; //ComponentsOverrides['MuiAvatar'];28 //variants?: ComponentsVariants['MuiAvatar'];29 };30 MuiAvatarGroup?: {31 defaultProps?: Omit<AvatarGroupProps, 'children'>;32 styleOverrides?: AvatarGroupStyles;33 };34 // MuiBackdrop?: {35 // defaultProps?: ComponentsProps['MuiBackdrop'];36 // styleOverrides?: ComponentsOverrides['MuiBackdrop'];37 // };38 // MuiBadge?: {39 // defaultProps?: ComponentsProps['MuiBadge'];40 // styleOverrides?: ComponentsOverrides['MuiBadge'];41 // variants?: ComponentsVariants['MuiBadge'];42 // };43 // MuiBottomNavigation?: {44 // defaultProps?: ComponentsProps['MuiBottomNavigation'];45 // styleOverrides?: ComponentsOverrides['MuiBottomNavigation'];46 // };47 // MuiBottomNavigationAction?: {48 // defaultProps?: ComponentsProps['MuiBottomNavigationAction'];49 // styleOverrides?: ComponentsOverrides['MuiBottomNavigationAction'];50 // };51 // MuiBreadcrumbs?: {52 // defaultProps?: ComponentsProps['MuiBreadcrumbs'];53 // styleOverrides?: ComponentsOverrides['MuiBreadcrumbs'];54 // };55 MuiButton?: {56 defaultProps?: Omit<ButtonProps, 'children'>;57 styleOverrides?: ButtonStyles;58 };59 // MuiButtonBase?: {60 // defaultProps?: ComponentsProps['MuiButtonBase'];61 // styleOverrides?: ComponentsOverrides['MuiButtonBase'];62 // };63 // MuiButtonGroup?: {64 // defaultProps?: ComponentsProps['MuiButtonGroup'];65 // styleOverrides?: ComponentsOverrides['MuiButtonGroup'];66 // variants?: ComponentsVariants['MuiButtonGroup'];67 // };68 // MuiCard?: {69 // defaultProps?: ComponentsProps['MuiCard'];70 // styleOverrides?: ComponentsOverrides['MuiCard'];71 // };72 // MuiCardActionArea?: {73 // defaultProps?: ComponentsProps['MuiCardActionArea'];74 // styleOverrides?: ComponentsOverrides['MuiCardActionArea'];75 // };76 // MuiCardActions?: {77 // defaultProps?: ComponentsProps['MuiCardActions'];78 // styleOverrides?: ComponentsOverrides['MuiCardActions'];79 // };80 // MuiCardContent?: {81 // defaultProps?: ComponentsProps['MuiCardContent'];82 // styleOverrides?: ComponentsOverrides['MuiCardContent'];83 // };84 // MuiCardHeader?: {85 // defaultProps?: ComponentsProps['MuiCardHeader'];86 // styleOverrides?: ComponentsOverrides['MuiCardHeader'];87 // };88 // MuiCardMedia?: {89 // defaultProps?: ComponentsProps['MuiCardMedia'];90 // styleOverrides?: ComponentsOverrides['MuiCardMedia'];91 // };92 // MuiCheckbox?: {93 // defaultProps?: ComponentsProps['MuiCheckbox'];94 // styleOverrides?: ComponentsOverrides['MuiCheckbox'];95 // };96 // MuiChip?: {97 // defaultProps?: ComponentsProps['MuiChip'];98 // styleOverrides?: ComponentsOverrides['MuiChip'];99 // variants?: ComponentsVariants['MuiChip'];100 // };101 // MuiCircularProgress?: {102 // defaultProps?: ComponentsProps['MuiCircularProgress'];103 // styleOverrides?: ComponentsOverrides['MuiCircularProgress'];104 // };105 // MuiCollapse?: {106 // defaultProps?: ComponentsProps['MuiCollapse'];107 // styleOverrides?: ComponentsOverrides['MuiCollapse'];108 // };109 // MuiContainer?: {110 // defaultProps?: ComponentsProps['MuiContainer'];111 // styleOverrides?: ComponentsOverrides['MuiContainer'];112 // };113 // /**114 // * @deprecated See CssBaseline.d.ts115 // */116 // MuiCssBaseline?: {117 // defaultProps?: ComponentsProps['MuiCssBaseline'];118 // styleOverrides?: ComponentsOverrides['MuiCssBaseline'];119 // };120 // MuiDialog?: {121 // defaultProps?: ComponentsProps['MuiDialog'];122 // styleOverrides?: ComponentsOverrides['MuiDialog'];123 // };124 // MuiDialogActions?: {125 // defaultProps?: ComponentsProps['MuiDialogActions'];126 // styleOverrides?: ComponentsOverrides['MuiDialogActions'];127 // };128 // MuiDialogContent?: {129 // defaultProps?: ComponentsProps['MuiDialogContent'];130 // styleOverrides?: ComponentsOverrides['MuiDialogContent'];131 // };132 // MuiDialogContentText?: {133 // defaultProps?: ComponentsProps['MuiDialogContentText'];134 // styleOverrides?: ComponentsOverrides['MuiDialogContentText'];135 // };136 // MuiDialogTitle?: {137 // defaultProps?: ComponentsProps['MuiDialogTitle'];138 // styleOverrides?: ComponentsOverrides['MuiDialogTitle'];139 // };140 // MuiDivider?: {141 // defaultProps?: ComponentsProps['MuiDivider'];142 // styleOverrides?: ComponentsOverrides['MuiDivider'];143 // variants?: ComponentsVariants['MuiDivider'];144 // };145 // MuiDrawer?: {146 // defaultProps?: ComponentsProps['MuiDrawer'];147 // styleOverrides?: ComponentsOverrides['MuiDrawer'];148 // };149 // MuiAccordion?: {150 // defaultProps?: ComponentsProps['MuiAccordion'];151 // styleOverrides?: ComponentsOverrides['MuiAccordion'];152 // };153 // MuiAccordionActions?: {154 // defaultProps?: ComponentsProps['MuiAccordionActions'];155 // styleOverrides?: ComponentsOverrides['MuiAccordionActions'];156 // };157 // MuiAccordionDetails?: {158 // defaultProps?: ComponentsProps['MuiAccordionDetails'];159 // styleOverrides?: ComponentsOverrides['MuiAccordionDetails'];160 // };161 // MuiAccordionSummary?: {162 // defaultProps?: ComponentsProps['MuiAccordionSummary'];163 // styleOverrides?: ComponentsOverrides['MuiAccordionSummary'];164 // };165 // MuiFab?: {166 // defaultProps?: ComponentsProps['MuiFab'];167 // styleOverrides?: ComponentsOverrides['MuiFab'];168 // variants?: ComponentsVariants['MuiFab'];169 // };170 // MuiFilledInput?: {171 // defaultProps?: ComponentsProps['MuiFilledInput'];172 // styleOverrides?: ComponentsOverrides['MuiFilledInput'];173 // };174 // MuiFormControl?: {175 // defaultProps?: ComponentsProps['MuiFormControl'];176 // styleOverrides?: ComponentsOverrides['MuiFormControl'];177 // };178 // MuiFormControlLabel?: {179 // defaultProps?: ComponentsProps['MuiFormControlLabel'];180 // styleOverrides?: ComponentsOverrides['MuiFormControlLabel'];181 // };182 // MuiFormGroup?: {183 // defaultProps?: ComponentsProps['MuiFormGroup'];184 // styleOverrides?: ComponentsOverrides['MuiFormGroup'];185 // };186 // MuiFormHelperText?: {187 // defaultProps?: ComponentsProps['MuiFormHelperText'];188 // styleOverrides?: ComponentsOverrides['MuiFormHelperText'];189 // };190 // MuiFormLabel?: {191 // defaultProps?: ComponentsProps['MuiFormLabel'];192 // styleOverrides?: ComponentsOverrides['MuiFormLabel'];193 // };194 // MuiGrid?: {195 // defaultProps?: ComponentsProps['MuiGrid'];196 // styleOverrides?: ComponentsOverrides['MuiGrid'];197 // };198 // MuiImageList?: {199 // defaultProps?: ComponentsProps['MuiImageList'];200 // styleOverrides?: ComponentsOverrides['MuiImageList'];201 // };202 // MuiImageListItem?: {203 // defaultProps?: ComponentsProps['MuiImageListItem'];204 // styleOverrides?: ComponentsOverrides['MuiImageListItem'];205 // };206 // MuiImageListItemBar?: {207 // defaultProps?: ComponentsProps['MuiImageListItemBar'];208 // styleOverrides?: ComponentsOverrides['MuiImageListItemBar'];209 // };210 // MuiIcon?: {211 // defaultProps?: ComponentsProps['MuiIcon'];212 // styleOverrides?: ComponentsOverrides['MuiIcon'];213 // };214 // MuiIconButton?: {215 // defaultProps?: ComponentsProps['MuiIconButton'];216 // styleOverrides?: ComponentsOverrides['MuiIconButton'];217 // };218 // MuiInput?: {219 // defaultProps?: ComponentsProps['MuiInput'];220 // styleOverrides?: ComponentsOverrides['MuiInput'];221 // };222 // MuiInputAdornment?: {223 // defaultProps?: ComponentsProps['MuiInputAdornment'];224 // styleOverrides?: ComponentsOverrides['MuiInputAdornment'];225 // };226 // MuiInputBase?: {227 // defaultProps?: ComponentsProps['MuiInputBase'];228 // styleOverrides?: ComponentsOverrides['MuiInputBase'];229 // };230 // MuiInputLabel?: {231 // defaultProps?: ComponentsProps['MuiInputLabel'];232 // styleOverrides?: ComponentsOverrides['MuiInputLabel'];233 // };234 // MuiLinearProgress?: {235 // defaultProps?: ComponentsProps['MuiLinearProgress'];236 // styleOverrides?: ComponentsOverrides['MuiLinearProgress'];237 // };238 // MuiLink?: {239 // defaultProps?: ComponentsProps['MuiLink'];240 // styleOverrides?: ComponentsOverrides['MuiLink'];241 // variants?: ComponentsVariants['MuiLink'];242 // };243 // MuiList?: {244 // defaultProps?: ComponentsProps['MuiList'];245 // styleOverrides?: ComponentsOverrides['MuiList'];246 // };247 // MuiListItem?: {248 // defaultProps?: ComponentsProps['MuiListItem'];249 // styleOverrides?: ComponentsOverrides['MuiListItem'];250 // };251 // MuiListItemAvatar?: {252 // defaultProps?: ComponentsProps['MuiListItemAvatar'];253 // styleOverrides?: ComponentsOverrides['MuiListItemAvatar'];254 // };255 // MuiListItemIcon?: {256 // defaultProps?: ComponentsProps['MuiListItemIcon'];257 // styleOverrides?: ComponentsOverrides['MuiListItemIcon'];258 // };259 // MuiListItemSecondaryAction?: {260 // defaultProps?: ComponentsProps['MuiListItemSecondaryAction'];261 // styleOverrides?: ComponentsOverrides['MuiListItemSecondaryAction'];262 // };263 // MuiListItemText?: {264 // defaultProps?: ComponentsProps['MuiListItemText'];265 // styleOverrides?: ComponentsOverrides['MuiListItemText'];266 // };267 // MuiListSubheader?: {268 // defaultProps?: ComponentsProps['MuiListSubheader'];269 // styleOverrides?: ComponentsOverrides['MuiListSubheader'];270 // };271 // MuiMenu?: {272 // defaultProps?: ComponentsProps['MuiMenu'];273 // styleOverrides?: ComponentsOverrides['MuiMenu'];274 // };275 // MuiMenuItem?: {276 // defaultProps?: ComponentsProps['MuiMenuItem'];277 // styleOverrides?: ComponentsOverrides['MuiMenuItem'];278 // };279 // MuiMobileStepper?: {280 // defaultProps?: ComponentsProps['MuiMobileStepper'];281 // styleOverrides?: ComponentsOverrides['MuiMobileStepper'];282 // };283 // MuiNativeSelect?: {284 // defaultProps?: ComponentsProps['MuiNativeSelect'];285 // styleOverrides?: ComponentsOverrides['MuiNativeSelect'];286 // };287 // MuiOutlinedInput?: {288 // defaultProps?: ComponentsProps['MuiOutlinedInput'];289 // styleOverrides?: ComponentsOverrides['MuiOutlinedInput'];290 // };291 // MuiPagination?: {292 // defaultProps?: ComponentsProps['MuiPagination'];293 // styleOverrides?: ComponentsOverrides['MuiPagination'];294 // };295 // MuiPaginationItem?: {296 // defaultProps?: ComponentsProps['MuiPaginationItem'];297 // styleOverrides?: ComponentsOverrides['MuiPaginationItem'];298 // };299 // MuiPaper?: {300 // defaultProps?: ComponentsProps['MuiPaper'];301 // styleOverrides?: ComponentsOverrides['MuiPaper'];302 // variants?: ComponentsVariants['MuiPaper'];303 // };304 // MuiPopover?: {305 // defaultProps?: ComponentsProps['MuiPopover'];306 // styleOverrides?: ComponentsOverrides['MuiPopover'];307 // };308 // MuiRadio?: {309 // defaultProps?: ComponentsProps['MuiRadio'];310 // styleOverrides?: ComponentsOverrides['MuiRadio'];311 // };312 // MuiScopedCssBaseline?: {313 // defaultProps?: ComponentsProps['MuiScopedCssBaseline'];314 // styleOverrides?: ComponentsOverrides['MuiScopedCssBaseline'];315 // };316 // MuiSelect?: {317 // defaultProps?: ComponentsProps['MuiSelect'];318 // styleOverrides?: ComponentsOverrides['MuiSelect'];319 // };320 // MuiSlider?: {321 // defaultProps?: ComponentsProps['MuiSlider'];322 // styleOverrides?: ComponentsOverrides['MuiSlider'];323 // };324 // MuiSnackbar?: {325 // defaultProps?: ComponentsProps['MuiSnackbar'];326 // styleOverrides?: ComponentsOverrides['MuiSnackbar'];327 // };328 // MuiSnackbarContent?: {329 // defaultProps?: ComponentsProps['MuiSnackbarContent'];330 // styleOverrides?: ComponentsOverrides['MuiSnackbarContent'];331 // };332 // MuiSpeedDial?: {333 // defaultProps?: ComponentsProps['MuiSpeedDial'];334 // styleOverrides?: ComponentsOverrides['MuiSpeedDial'];335 // };336 // MuiSpeedDialAction?: {337 // defaultProps?: ComponentsProps['MuiSpeedDialAction'];338 // styleOverrides?: ComponentsOverrides['MuiSpeedDialAction'];339 // };340 // MuiSpeedDialIcon?: {341 // defaultProps?: ComponentsProps['MuiSpeedDialIcon'];342 // styleOverrides?: ComponentsOverrides['MuiSpeedDialIcon'];343 // };344 // MuiStep?: {345 // defaultProps?: ComponentsProps['MuiStep'];346 // styleOverrides?: ComponentsOverrides['MuiStep'];347 // };348 // MuiStepButton?: {349 // defaultProps?: ComponentsProps['MuiStepButton'];350 // styleOverrides?: ComponentsOverrides['MuiStepButton'];351 // };352 // MuiStepConnector?: {353 // defaultProps?: ComponentsProps['MuiStepConnector'];354 // styleOverrides?: ComponentsOverrides['MuiStepConnector'];355 // };356 // MuiStepContent?: {357 // defaultProps?: ComponentsProps['MuiStepContent'];358 // styleOverrides?: ComponentsOverrides['MuiStepContent'];359 // };360 // MuiStepIcon?: {361 // defaultProps?: ComponentsProps['MuiStepIcon'];362 // styleOverrides?: ComponentsOverrides['MuiStepIcon'];363 // };364 // MuiStepLabel?: {365 // defaultProps?: ComponentsProps['MuiStepLabel'];366 // styleOverrides?: ComponentsOverrides['MuiStepLabel'];367 // };368 // MuiStepper?: {369 // defaultProps?: ComponentsProps['MuiStepper'];370 // styleOverrides?: ComponentsOverrides['MuiStepper'];371 // };372 // MuiSvgIcon?: {373 // defaultProps?: ComponentsProps['MuiSvgIcon'];374 // styleOverrides?: ComponentsOverrides['MuiSvgIcon'];375 // };376 // MuiSwitch?: {377 // defaultProps?: ComponentsProps['MuiSwitch'];378 // styleOverrides?: ComponentsOverrides['MuiSwitch'];379 // };380 // MuiTab?: {381 // defaultProps?: ComponentsProps['MuiTab'];382 // styleOverrides?: ComponentsOverrides['MuiTab'];383 // };384 // MuiTable?: {385 // defaultProps?: ComponentsProps['MuiTable'];386 // styleOverrides?: ComponentsOverrides['MuiTable'];387 // };388 // MuiTableBody?: {389 // defaultProps?: ComponentsProps['MuiTableBody'];390 // styleOverrides?: ComponentsOverrides['MuiTableBody'];391 // };392 // MuiTableCell?: {393 // defaultProps?: ComponentsProps['MuiTableCell'];394 // styleOverrides?: ComponentsOverrides['MuiTableCell'];395 // };396 // MuiTableContainer?: {397 // defaultProps?: ComponentsProps['MuiTableContainer'];398 // styleOverrides?: ComponentsOverrides['MuiTableContainer'];399 // };400 // MuiTableFooter?: {401 // defaultProps?: ComponentsProps['MuiTableFooter'];402 // styleOverrides?: ComponentsOverrides['MuiTableFooter'];403 // };404 // MuiTableHead?: {405 // defaultProps?: ComponentsProps['MuiTableHead'];406 // styleOverrides?: ComponentsOverrides['MuiTableHead'];407 // };408 // MuiTablePagination?: {409 // defaultProps?: ComponentsProps['MuiTablePagination'];410 // styleOverrides?: ComponentsOverrides['MuiTablePagination'];411 // };412 // MuiTableRow?: {413 // defaultProps?: ComponentsProps['MuiTableRow'];414 // styleOverrides?: ComponentsOverrides['MuiTableRow'];415 // };416 // MuiTableSortLabel?: {417 // defaultProps?: ComponentsProps['MuiTableSortLabel'];418 // styleOverrides?: ComponentsOverrides['MuiTableSortLabel'];419 // };420 // MuiTabs?: {421 // defaultProps?: ComponentsProps['MuiTabs'];422 // styleOverrides?: ComponentsOverrides['MuiTabs'];423 // };424 // MuiTextField?: {425 // defaultProps?: ComponentsProps['MuiTextField'];426 // styleOverrides?: ComponentsOverrides['MuiTextField'];427 // };428 // MuiToggleButton?: {429 // defaultProps?: ComponentsProps['MuiToggleButton'];430 // styleOverrides?: ComponentsOverrides['MuiToggleButton'];431 // };432 // MuiToggleButtonGroup?: {433 // defaultProps?: ComponentsProps['MuiToggleButtonGroup'];434 // styleOverrides?: ComponentsOverrides['MuiToggleButtonGroup'];435 // };436 // MuiToolbar?: {437 // defaultProps?: ComponentsProps['MuiToolbar'];438 // styleOverrides?: ComponentsOverrides['MuiToolbar'];439 // variants?: ComponentsVariants['MuiToolbar'];440 // };441 // MuiTooltip?: {442 // defaultProps?: ComponentsProps['MuiTooltip'];443 // styleOverrides?: ComponentsOverrides['MuiTooltip'];444 // };445 // MuiTouchRipple?: {446 // defaultProps?: ComponentsProps['MuiTouchRipple'];447 // styleOverrides?: ComponentsOverrides['MuiTouchRipple'];448 // };449 MuiTypography?: {450 defaultProps?: TypographyProps; // ComponentsProps['MuiTypography'];451 styleOverrides?: Partial<TypographyStyles>; // ComponentsOverrides['MuiTypography'];452 };453 // MuiUseMediaQuery?: {454 // defaultProps?: ComponentsProps['MuiUseMediaQuery'];455 // };456 // MuiWithWidth?: {457 // defaultProps?: ComponentsProps['MuiWithWidth'];458 // };...
react-app-env.d.ts
Source:react-app-env.d.ts
1/// <reference types="react-scripts" />2declare namespace App {3 interface ComponentsProps {4 className?: string5 style?: React.CSSProperties6 children?: React.ReactNode7 }8 interface HeaderProps extends ComponentsProps {9 handleLightsOff: Function10 }11 interface MainProps extends ComponentsProps {12 }13 interface HeroProps extends ComponentsProps {14 }15 interface FeaturesProps extends ComponentsProps {16 }17 interface CtaProps extends ComponentsProps {18 19 }...
Using AI Code Generation
1import { ComponentsProps } from './storybook-root'2export default {3}4const Template = (args) => <ComponentsProps {...args} />5export const Primary = Template.bind({})6Primary.args = {7}8export const Secondary = Template.bind({})9Secondary.args = {10}11export const Large = Template.bind({})12Large.args = {13}14export const Small = Template.bind({})15Small.args = {16}17import { ComponentsProps } from './storybook-root'18export default {19}20const Template = (args) => <ComponentsProps {...args} />21export const Primary = Template.bind({})22Primary.args = {23}24export const Secondary = Template.bind({})25Secondary.args = {26}27export const Large = Template.bind({})28Large.args = {29}30export const Small = Template.bind({})31Small.args = {32}33import { ComponentsProps } from './storybook-root'34export default {35}36const Template = (args) => <ComponentsProps {...args} />37export const Primary = Template.bind({})38Primary.args = {39}40export const Secondary = Template.bind({})41Secondary.args = {42}43export const Large = Template.bind({})44Large.args = {
Using AI Code Generation
1import { ComponentsProps } from 'storybook-root-decorator';2export default { title: 'Component' };3export const Component = () => <div>Component</div>;4ComponentsProps.set('Component', { myProp: 'myValue' });5export const Story = () => <Component />;6export const StoryWithProps = () => <Component myProp="myValue" />;7export const StoryWithProps2 = () => <Component {...ComponentsProps.get('Component')} />;8export const StoryWithProps3 = () => <Component {...ComponentsProps.get('Component', { myProp: 'myValue' })} />;9export const StoryWithProps4 = () => <Component {...ComponentsProps.get('Component', { myProp: 'myValue' }, true)} />;10export const StoryWithProps5 = () => <Component {...ComponentsProps.get('Component', { myProp: 'myValue' }, false)} />;11export const StoryWithProps6 = () => <Component {...ComponentsProps.get('Component', { myProp: 'myValue' }, false, true)} />;12export const StoryWithProps7 = () => <Component {...ComponentsProps.get('Component', { myProp: 'myValue' }, false, false)} />;
Using AI Code Generation
1import {ComponentsProps} from 'storybook-root-vc';2const {getProps} = ComponentsProps();3const props = getProps('Button');4console.log(props);5import {ComponentsProps} from 'storybook-root-vc';6const {getProps} = ComponentsProps();7const props = getProps('Button');8console.log(props);9import {ComponentsProps} from 'storybook-root-vc';10const {getProps} = ComponentsProps();11const props = getProps('Button');12console.log(props);13import {ComponentsProps} from 'storybook-root-vc';14const {getProps} = ComponentsProps();15const props = getProps('Button');16console.log(props);17import {ComponentsProps} from 'storybook-root-vc';18const {getProps} = ComponentsProps();19const props = getProps('Button');20console.log(props);21import {ComponentsProps} from 'storybook-root-vc';22const {getProps} = ComponentsProps();23const props = getProps('Button');24console.log(props);25import {ComponentsProps} from 'storybook-root-vc';26const {getProps} = ComponentsProps();27const props = getProps('Button');28console.log(props);29import {ComponentsProps} from 'storybook-root-vc';30const {getProps} = ComponentsProps();31const props = getProps('Button');32console.log(props);33import {ComponentsProps} from 'storybook-root-vc';34const {getProps} = ComponentsProps();35const props = getProps('Button');36console.log(props);37import {ComponentsProps} from 'storybook-root-vc';38const {getProps} = ComponentsProps();39const props = getProps('Button');40console.log(props);41import {ComponentsProps} from 'storybook-root-vc';42const {getProps} = ComponentsProps();43const props = getProps('
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
