score:1
it seems to me the material-ui definition for muithemeable function is not right ...
doing
export default muithemeable()(mainheader);
is the same as doing
export const themed = muithemeable<mainheader, {}, {}>()(mainheader)
and doesn't compile because you omitted component property type and component property state
the compiler infers
<tcomponent<p, s>,{}, {}>
which doesn't match the function constraints
export function muithemeable<tcomponent extends (react.component<p, s>), p, s>()
: (component: tcomponent ) => tcomponent;
... lets add the missing constrains
to satisfy the compiler , we should do
export default (props: properties) => muithemeable<mainheader, properties, any>()(new mainheader(props));
but this is giving an instance to the function , when the f is expecting a class
if you later on do ...
// ...
import themeable from "./themeable";
let props = { title: "hello!" };
reactdom.render(<themeable {...props}/>, document.getelementbyid("main"));
it won't work
but if you change muithemeable definition to:
export function muithemeable<tcomponent extends (react.component<p, s>), p, s>()
: (component: function ) => tcomponent;
then you can use:
export default muithemeable<mainheader, properties, any>()( mainheader);
the tsc will generate errors
jsx element type 'themeable' does not have any construct or call signatures
but it will transpile the right thing , and work
but that's not ok,
because:
- it doesn't build
- function is not describing the right parameter type
- neither tcomponent describes what is returned,
it looks like its returning an instance when we need a class,... a type
finally:
this signature makes a bit more sense:
export function muithemeable<tcomponent extends (react.component<p, s>), p, s>(): (component: new()=> tcomponent ) => ( new() => tcomponent);
but after looking at the source
export function muithemeable<tcomponent extends react.component<p, s>, p extends muithemeproviderprops, s> (component: new () => tcomponent): react.statelesscomponent<p>
and this could be a way to get away with re-writing or augmenting the definition.
wrapping the function
... and perhaps using a decorator to reduce boilerplate and easier reading...
import * as react from "react";
import * as reactdom from "react-dom";
import * as injecttapeventplugin from "react-tap-event-plugin";
// needed for ontouchtap
// http://stackoverflow.com/a/34015469/988941
injecttapeventplugin();
import darkbasetheme from "material-ui/styles/basethemes/darkbasetheme";
import muithemeprovider from "material-ui/styles/muithemeprovider";
import getmuitheme from "material-ui/styles/getmuitheme";
import muithemeable from "material-ui/styles/muithemeable";
import appbar from "material-ui/appbar";
import muithemeproviderprops = __materialui.styles.muithemeproviderprops;
function themeable<tcomponent extends react.component<p, any>, p extends muithemeproviderprops> (component: new () => tcomponent): new() => tcomponent {
return muithemeable<tcomponent, p, any>()(component as any) as any;
}
const themeable = <p, tfunction extends react.componentclass<p>>(target: tfunction): tfunction => {
return themeable(target as any) as any;
};
export interface mybarprops extends __materialui.appbarprops, __materialui.styles.muithemeproviderprops {
// ...
}
@themeable
export class mybar extends react.component<mybarprops, any> {
constructor(props?: mybarprops, context?: any) {
super(props, context);
}
render() {
if (!this.props.muitheme) {
throw new error("muitheme not found");
}
return (
<appbar {...this.props} />
);
}
}
const darktheme = getmuitheme(darkbasetheme);
darktheme.appbar.color = "red";
const main = () => (
<muithemeprovider muitheme={darktheme}>
<mybar title="my appbar" />
</muithemeprovider>
);
reactdom.render(<main></main>,document.getelementbyid("root"));
Source: stackoverflow.com
Related Query
- Using Typescript with Styled Components and Material UI
- Using makeStyles in material ui with typescript
- Typescript and eslint issue when using styled-components and Material UI: `React does not recognize the `showText` prop on a DOM element`
- Typescript props not matching component props when using withStyles HOC from Material UI
- Using Material-UI muiThemeable in Typescript
- Using material design for React with typescript
- Material ui v5 cant customize theme using typescript
- Default property value in React component using TypeScript
- How to style components using makeStyles and still have lifecycle methods in Material UI?
- How to add multiple classes in Material UI using the classes props?
- typesafe select onChange event using reactjs and typescript
- Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
- How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
- Using a forwardRef component with children in TypeScript
- Using state in react with TypeScript
- React - using TypeScript vs Flow vs?
- Using styled-components with props and TypeScript
- How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?
- React with Typescript -- Generics while using React.forwardRef
- how to import material ui icons?i met some problems using Material ui icons
- Type of Axios mock using jest typescript
- How to make the whole Card component clickable in Material UI using React JS?
- How to submit the form by Material UI Dialog using ReactJS
- Material UI Menu using routes
- Destructuring props in the function parameters using TypeScript
- Using React.lazy with TypeScript
- Typescript errors when using jest mocks
- Using React forwardRef with Typescript generic JSX arguments
- Typescript Equality issue on Material UI Autocomplete
- How to import shared typescript code using create-react-app (no eject)?
More Query from same tag
- React router redirect to root blank page
- Change input given value to a custom value in ReactJS
- React Boostrap NavDropdown.Item closes modal when NavBar is closed
- href doesn't work, using react router
- Functional Component child component does not re-rendered after its props is updated by its Parent
- How can I obtain an image link that is in the body of my GET request using React.js?
- For ReactJS, how is the change from using Container components and Presentation components to using Hooks?
- GH Pages loading incorrect React Router Page?
- React-Redux @connect syntax error
- Is it possible to change the rendered output of a component by wrapping it in another component?
- React: Can't type into certain input fields on mobile
- React, How to send props from parent component to child component? (to use those props outside render function )
- Align Menu.Item to bottom inside a Sider
- Service Worker (Workbox) isn't delegating routes to our SPA on reload
- How to edit a form in wizard and save its state for wizard
- How do I apply CSS to redux-form fields?
- how to call variable in jsx
- Cannot access class.contextType within a child component
- How do i call a method within another method in react class Es6
- Facebook Comments plugin in React/Node.js app only shows on refresh
- Adding Dates in Javascript
- Show loading icon before first react app initialization
- How do I break the infinite redirect loop I've created in Next JS?
- Apply Dynamic Item Style To React FullCalender
- Tailwindcss default hide left side drawer on mobile but show when toggle button click
- How to pass in a second argument on ReactJS onSubmit function call
- POST error issue when accesing dialog flow api in frontend
- How to create a rectangle that is 100% of the width and 50% of the height of a photoshop document?
- Why axios appends the current URL to API calls in Laravel / React?
- Dropdown cascading fetch the selected value