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 useTextStyles = () => {
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 { useTextStyles } from '../utils/stiles.tsx'
//...
const { TextMd } = useTextStyles();
//into html code:
<TextMd>Hello world</TextMd>
This doesn't work, probably because I have to pass the children explicitely.. Maybe I am doing it wrong.. In that case what is the best solution to do that in nextjs?
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>
);
};