react typescript stitches css prop problem, not work

Question

i'm currently working on a project using stitches with cra but i've stuck to a problem with css props. here's my code

Texts/index.tsx

import React from 'react';
import { TextStyle } from './textStyle';

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

export default Texts;

and this index.tsx is exported to another components Container/index.tsx

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

// atoms
import Texts from 'src/components/atoms/texts';


const PageContainer = () => {
    return (
        <Container>
            <Contents >
                <div>
                    <Texts
                        css={{ color: 'red' }}
                    />
                    <Texts

                        css={{ paddingTop: '20px' }}
                    />
                </div>
            </Contents>
        </Container>
    );
};

export default PageContainer;

as you can see with the above code, contains css as its child but css is never rendered at all can anyone help me with this issue? FYI, console.log(css); returned undefined to me. Thank you in advance!

What do you mean `css` is never rendered? The rendered HTML elements, don't have the given styling? Also what is the output of `console.log(css)`? — Henry Woody, Oct 04 '22 at 05:50
console.log returned 'undefined', and css is never rendered means... styled is not overriding the components like no any css is applied — someone called jr dev, Oct 04 '22 at 05:56
Hmm looks okay to me (as far as passing the `css` prop), are you sure you're importing from the correct file? — Henry Woody, Oct 04 '22 at 05:59

react typescript stitches css prop problem, not work

0 Answers0