React+TypeScript项目中Stitches CSS Prop不生效问题求助

核心问题分析 #

你的Texts组件未正确定义PropsType类型，导致TypeScript无法识别传入的css属性，最终css参数被忽略，出现undefined的情况。同时存在组件属性缺失、styled组件定义不明确的潜在问题，以下是针对性解决方案：

1. 补全组件Props类型定义 #

在Texts/index.tsx中明确声明PropsType，包含text和css属性，其中css的类型可直接从Stitches配置中导入：

import React from 'react';
import { TextStyle } from './textStyle';
import type { CSSProp } from '../../../stitches.config';

// 定义组件属性类型
type PropsType = {
  text: string; // 必须传入文本内容，否则组件无显示
  css?: CSSProp; // 可选的Stitches CSS属性
};

const Texts = ({ text, css }: PropsType) => {
    console.log(css);
    return (
        <TextStyle css={css}>
            {text}
        </TextStyle>
    );
};

export default Texts;

2. 确认TextStyle是Stitches styled组件 #

确保textStyle.ts中的TextStyle是通过Stitches的styled方法创建的基础组件，示例如下：

import { styled } from '../../../stitches.config';

// 创建基础文本styled组件
export const TextStyle = styled('p', {
  // 可添加默认基础样式
  fontSize: '1rem',
  lineHeight: 1.5,
});

3. 修正PageContainer中组件的使用 #

在Container/index.tsx中，给Texts组件补充text属性，并确保css属性正确传递：

import { styled } from '../../../stitches.config';
import Texts from 'src/components/atoms/texts';

// 定义容器styled组件
const Container = styled('div', {
  width: '100%',
  padding: '2rem',
});

const Contents = styled('div', {
  maxWidth: '1200px',
  margin: '0 auto',
});

const PageContainer = () => {
    return (
        <Container>
            <Contents>
                <div>
                    <Texts
                        text="红色测试文本"
                        css={{ color: 'red' }}
                    />
                    <Texts
                        text="带顶部内边距的文本"
                        css={{ paddingTop: '20px' }}
                    />
                </div>
            </Contents>
        </Container>
    );
};

export default PageContainer;

内容的提问来源于stack exchange，提问作者someone called jr dev