样式组件继承不起作用

Question

The problem is that I have one DefaultButton and I code custom styled components for it.问题是我有一个 DefaultButton 并且我为它编写了自定义样式的组件。 I have a different button called PrimaryButton and I want to write style properties to it.我有一个名为 PrimaryButton 的不同按钮，我想为其编写样式属性。 But he doesn't see it.但他没有看到。

This is folder structure这是文件夹结构

DefaultButton.tsx默认按钮.tsx

import * as S from "./styles";

const DefaultButton = ({ children }: any) => {
  return <S.Button>{children}</S.Button>;
};
export default DefaultButton;

PrimaryButton.tsx主按钮.tsx

import styled from "styled-components";

import { colors } from "theme";
import DefaultButton from "./DefaultButton";

const PrimaryButton = styled(DefaultButton)`
  background-color: ${colors.mainColors.blueOcean};
`;
export default PrimaryButton;

index.tsx Page index.tsx 页面

import { PrimaryButton } from "components";

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>hessssllo</h1>
      <PrimaryButton>Sıgn in</PrimaryButton>
    </div>
  );
};

export default Home;

styles.tsx样式.tsx

import styled from "styled-components";

export const Button = styled.button`
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
`;

Components index.ts for importing用于导入的组件 index.ts

export { default as Button } from "./Buttons/DefaultButton";
export { default as PrimaryButton } from "./Buttons/PrimaryButton";

Answer 1

You are trying to set DefaultButton into PrimaryButton , it looks like <button><button>text</button></button> , hence you cannot see the styled button.您正在尝试将DefaultButton设置为PrimaryButton ，它看起来像<button><button>text</button></button> ，因此您看不到样式按钮。 So, all you have to do, just get the styled button from the styled.ts .因此，您只需从styled.ts 中获取样式按钮即可。

PrimaryButton.tsx主按钮.tsx

import styled from "styled-components";

import { Button } from "./styles";

const PrimaryButton = styled(Button)`
  background-color: blue;
  color: white;
`;
export default PrimaryButton;

样式组件继承不起作用

问题描述

1 个解决方案

解决方案1
0 2021-10-27 17:30:32

PrimaryButton.tsx主按钮.tsx

样式组件继承不起作用

问题描述

1 个解决方案

解决方案1 0 2021-10-27 17:30:32

PrimaryButton.tsx主按钮.tsx

解决方案1
0 2021-10-27 17:30:32