You can find them in or the original GitHub page. So first of all, let’s check the default declarations. Extend Material-UI theme in TypeScriptĪs you checked above, the target type you should extend is PaletteOptions. But if you try to do it with failure, you can get same error as above.īecause this article was written before the release, please replace success key with failure. So how you can use extra keys? The answer is extending Material UI theme type by yourself.īecause Material UI 4.8.1 release added success, warning and info keys to PaletteOptions, you don’t get errors from them anymore. It means that because Material-UI package already provide the type declaration of palette options, you can’t add extra keys to it. Object literal may only specify known properties, and ‘success' does not exist in type ‘PaletteOptions’. theme.palette ├──── primary ├──── secondary ├──── error ├──── grey |_ text |_ divider |_ action |_ background |_ success green here? |_ failure red more? |_ warning yellow here? |_ info gray here?īut when you try it, you would get the error like below. But when you create a theme, you might want more palette options like below. For example, primary color is red, secondary is blue. You normally assign one color to one palette option. same as primary │ |_ text │ ├──── primary: string │ ├──── secondary: string │ ├──── disabled: string │ └──── hint: string │ |_ divider: string │ |_ action │ ├──── active: string │ ├──── hover: string │ ├──── hoverOpacity: string │ ├──── selected: string │ ├──── disabled: string │ └──── disabledBackground: string | |_ background ├──── default: string └──── card: string Actually, if you master this article, you could extend other types ! The problem of Material-UI themeĪs I explained above, default Material-UI theme is bit limited like below. So this article explains how you can extend Material-UI theme in TypeScript. Unfortunately, default Material-UI theme is bit limited. In my case, I need to reduce the height of the Accordion. To match with the layout of the HMI I have to update the layout of some predefined components by Material ui. For the display of graphical widgets, I'm also working with Material.ui. But one difficult thing you encounter is about theme, especially palette. I am working on the migration of a JavaFx HMI to a web application working with React.js. You can find good docs in Material-UI website. So it was meant to be that two of them met.Īs you use, you could know integrating TypeScript to Material-UI is not difficult. Combination of React and TypeScript is super powerful and beautiful. The best thing of all is looking good ! On the other hand, a lot of React users use TypeScript with React these days because it helps many potential run time errors especially for large applications. Material-UI is one of the most popular React component library in the world because it’s easy to use and fast.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |