Блог

Мне нужно создать крючок для создания некоторых общих стилей и использовать его в своем проекте. Я попытался сделать следующее:

 export const useTextStyles = () =gt; {  const styles = {  TextMd,  };   return styles; };  const TextMd: React.FClt;{ className: string }gt; = ({ className }) =gt; {  return (  lt;p  className={`block transform transition-colors duration-200 py-2 hover:text-gray-800 text-gray-800 .leading-relaxed ${className}`}  gt;lt;/pgt;  ); };  

Я использую его вот так:

 import { useTextStyles } from '../utils/stiles.tsx' //... const { TextMd } = useTextStyles(); //into html code: lt;TextMdgt;Hello worldlt;/TextMdgt;  

Это не работает, вероятно, потому, что я должен четко передать детей.. Может быть, я делаю это неправильно.. В таком случае, каково лучшее решение для этого в nextjs?

Просто добавьте свойство children

 import {ReactNode} from 'react'   const TextMd: React.FClt;{ className: string, children: ReactNode }gt; = ({ className, children }) =gt; {  return (  lt;p  className={`block transform transition-colors duration-200 py-2 hover:text-gray-800 text-gray-800 .leading-relaxed ${className}`}  gt;{children}lt;/pgt;  ); };