How can i get children component in nextjs?-CodePudding

I need to build a hook to do some generic styles and use it around my project. I tried to do the following:

export const textStyles = () => {
  const styles = {
    TextMd,
  };

  return styles;
};

const TextMd: React.FC<{ className: string }> = ({ className }) => {
  return (
    <p
      className={`block transform transition-colors duration-200 py-2 hover:text-gray-800 text-gray-800 .leading-relaxed ${className}`}
    ></p>
  );
};

I use it around like this:

import { textStyles } from '../utils/stiles.tsx'
const { TextMd } = textStyles();
<TextMd>Hello world</TextMd>

CodePudding user response：

Just add the children property

import {ReactNode} from 'react' 

const TextMd: React.FC<{ className: string, children: ReactNode }> = ({ className, children }) => {
  return (
    <p
      className={`block transform transition-colors duration-200 py-2 hover:text-gray-800 text-gray-800 .leading-relaxed ${className}`}
    >{children}</p>
  );
};