Using material design for React with typescript

Question

I am looking for a pattern to use react material design with typescript but I am having a few issues.

export defaults seems to be an anti pattern, and the options in my tsconfig will not allow me to do that. I am wondering is their a better way to do this without disabling it through the tsconfig.
what about a component with state which uses a class instead of functions, how would I apply withstyles to a class.

Could anybody please help me to apply the withstyles to my typical stateful component pattern without introducing anti patterns.

Typical Statefull component pattern:

import * as React from "react";

export namespace Header {
  export interface Props {
  }
}

export class Header extends React.Component<Header.Props> {
  constructor(props: Header.Props, context?: any) {
    super(props, context);
  }

  public render(): JSX.Element {
    return (
      <div> HEADER HTML </div>
    );
  }
}

MATERIAL UI RECOMMENDED APPROACH:

import s from './Styleguide.scss';

function Styleguide() {
    ...
}

function LinksComponent() {
    ...
}

function ButtonsComponent() {
    ...
}

const Links = withStyles(s)(LinksComponent);
const Buttons = withStyles(s)(ButtonsComponent);

export {
    Links,
    Buttons
};

export default withStyles(s)(Styleguide);

lecstor · Accepted Answer · 2018-12-12 11:40:17Z

1

just export your styled component as a named export?

import * as React from "react";
import s from './Styleguide.scss';

export namespace Header {
  export interface Props {
  }
}

class BareHeader extends React.Component<Header.Props> {
  constructor(props: Header.Props, context?: any) {
    super(props, context);
  }

  public render(): JSX.Element {
    return (
      <div> HEADER HTML </div>
    );
  }
}

const Header = withStyles(s)(BareHeader);

export { Header };

answered Dec 12, 2018 at 11:40

lecstor

5,70723 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using material design for React with typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related