Использование дизайна материала для React с машинописью

Question

Я ищу шаблон для использования дизайна реагирующего материала с машинописью, но у меня есть несколько проблем.

1. экспортные настройки по умолчанию кажутся анти-паттернами, и опции в моем tsconfig не позволят мне это сделать.Мне интересно, это лучший способ сделать это, не отключая его через tsconfig.

2. как насчет компонента с состоянием, который использует класс вместо функций, как бы я применил withstyles ккласс.

Может кто-нибудь помочь мне применить стили для моего типичного шаблона компонента с состоянием без введения анти-шаблонов.

Типичный шаблон компонента Statefull:

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>
    );
  }
}

РЕКОМЕНДУЕМЫЙ ПОДХОД МАТЕРИАЛА UI:

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);

Answer 1

просто экспортировать свой стилизованный компонент как именованный экспорт?

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 };