Estoy tratando de encontrar una manera de "organizar" el componente de reacción como vue, donde se incluye con una sección diferente para HTML, JS y CSS.

Por ejemplo

 export default function HeaderExample() { return ( <> <h1>Hello World</h1> <style jsx>{` h1 { color: yellow; } `} </style> </> ) }

Quiero convertir a:

 export default function HeaderExample() { const compStyle = getStyle(); return ( <> <h1>Hello World</h1> <style jsx>{compStyle} </style> </> ) } function getStyle() { return ` h1 { color: yellow; } ` }

Funciona, pero escribirlo es bastante difícil porque no hay resaltado de sintaxis ni nada.

¿Es una buena convención en general?

¿Y hay alguna manera de habilitar la ayuda de resaltado/formato de sintaxis para este tipo de cosas? ¿Y debería funcionar también con SCSS o PostCSS?