Является ли подобная стайлинг компонентов плохой практикой? - PullRequest
Новая
       4

Является ли подобная стайлинг компонентов плохой практикой?

0 голосов
/ 06 января 2020

Я хотел бы знать, имеет ли этот подход с styled-components, nextjs, typescript и react какие-либо существенные проблемы с * fl34 * или производительностью. Я хотел создать компонент, который не имеет стиля по умолчанию и может быть снабжен стилями CSS для каждого элемента HTML внутри компонента. Мне также нужно было убедиться, что предоставленные стили CSS могут работать с реквизитами, которые элементы стиля HTML получат от компонента. Я покажу код:

Репо можно найти по адресу: Github link

navigation.tsx 

import { ReactElement, memo, useMemo, useCallback } from "react";
import Link from "next/link";
import * as S from "./navigation.styles";
import { Style } from "../../types";

export type NavigationLinks = { [key: string]: string };

type Props = {
  styles?: {
    navigation: Style;
    link: Style;
  };
  links: NavigationLinks;
  currentRoute: string;
};

function Navigation({
  styles = { navigation: null, link: null },
  links,
  currentRoute,
}: Props): ReactElement {
  const generateNavigationLinks = useCallback(
    function(links: NavigationLinks) {
      return Object.keys(links).map((linkName) => {
        const href = links[linkName];
        const isCurrent = href === currentRoute;
        return (
          <Link key={linkName} href={href}>
            <S.Link styles={styles.link} active={isCurrent}>
              {linkName}
            </S.Link>
          </Link>
        );
      });
    },
    [currentRoute, styles.link]
  );

  const navLinks = useMemo(() => {
    return generateNavigationLinks(links);
  }, [generateNavigationLinks, links]);

  return <S.Navigation styles={styles.navigation}>{navLinks}</S.Navigation>;
}

export default memo(Navigation);

navigation.styles.ts 

import styled from "styled-components";
import { Style, ExportProps } from "../../types";

type Props = { styles: Style };

type Activatable = { active: boolean };

export const Navigation = styled.nav<Props>`
  ${(props): Style => props.styles}
`;

export type LinkProps = ExportProps<Props & Activatable>;
export const Link = styled.a<Props & Activatable>`
  ${(props): Style => props.styles}
`;

index.tsx 

import { ReactElement, memo } from "react";
import * as S from "../styles/index.styles";
import Navigation, {
  NavigationLinks,
} from "../components/Navigation/navigation";

const navigationLinks: NavigationLinks = {
  Home: "/",
  Blog: "/blog",
  About: "/about",
};

const navigationStyles = {
  navigation: S.Navigation,
  link: S.Link,
};

type Props = { currentRoute: string };

function Home({ currentRoute }: Props): ReactElement {
  return (
    <>
      <Navigation
        links={navigationLinks}
        styles={navigationStyles}
        currentRoute={currentRoute}
      />
    </>
  );
}

export default memo(Home);

index.styles .ts 

import { css } from "styled-components";
import { LinkProps } from "../components/Navigation/navigation.styles";

export const Navigation = css`
  background-color: green;
`;

export const Link = css<LinkProps>`
  color: ${(props): string => (props.active ? "red" : "black")};
`;

Я знаю, что это, может быть, большой вопрос, но я просто хотел узнать, есть ли у подхода большие проблемы или он считается «антипрактикой». Большое спасибо за вашу помощь!

1 Ответ

0 голосов
/ 27 февраля 2020

Любые классы, используемые в стилизованных компонентах, не могут быть повторно использованы в контексте вашего приложения, которое не является DRY и противоречит цели CSS. Стилизованные компоненты так же хороши, как и встроенные, без разделения задач и старого доброго кода спагетти

...