像这样的样式组件是一种不好的做法吗？答案

【问题标题】：Is styling components like this a bad practice?像这样的样式组件是一种不好的做法吗？
【发布时间】：2020-04-24 08:07:17
【问题描述】：

我想知道styled-components、nextjs、typescript 和react 的这种方法是否存在任何重大缺陷或性能问题。我想创建一个默认没有样式的组件，并且可以为组件内的每个 HTML 元素提供 CSS 样式。我还需要确保提供的 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")};
`;

我知道这可能是一个大问题，但我只是想知道这种方法是否有任何大问题或被认为是“反实践”。非常感谢您的帮助！

【问题讨论】：

你的意思是整个css in js方法吗？
我正在寻找一种方法来为只包含逻辑的组件提供样式。我正在使用样式组件。我可以在 index 中使用 styled() 包装 Navigation 并以这种方式对其进行样式设置，但我不确定如何设置组件中嵌套 JSX 元素的样式，例如因为文档说在样式中使用子选择器是 escape hatch .我想知道使用 styled-components 设置 u 样式的纯逻辑组件样式的最佳方法是什么。
我猜是因为您想根据逻辑生成动态样式，这将是一个合适的用例！如果您查看我们可以在 react/next 中设置样式的方式，这是最好的解决方案！我们可以使用 less/sass 和条件 - 我们可以使用带有条件的内联 css - 我们可以使用样式组件 - 我们可以使用布局（在这种情况下没有用）
据我所知，在 UI 库中确实建议这样做，因为您将组件与其样式隔离开来，并且在删除一个组件时不会发生任何影响！检查这个 => webdesign.tutsplus.com/articles/…
但是现在当任何样式发生变化时，它会触发对所有样式的重新渲染。你能确认这种方法对性能没有坏处/坏处吗？

标签： reactjs typescript next.js styled-components

【解决方案1】：

样式组件中使用的任何类都不能在整个应用程序的上下文中重用，这不是 DRY 并且违背了 CSS 的目的。样式化组件与内联样式一样好，没有关注点分离和良好的旧意大利面条代码

【讨论】：