Home>

I am creating static components, and I wanted to make it so that when creating components it was possible to pass some parameters. For examples, I create a title and pass the font size to the props, bold or not, etc.

Here is my component.

import React from 'react'
const Heading= ({children, ... props})= >
 {
    return (
        <
div style= {{fontSize: Number (props.fontsize)}} >
            {children}
        <
/div >
    )
}
export default Heading

And here I am calling the component

<
Heading fontsize= "24" bold= {true} >
Hello <
/Heading >

And I know that inline styles are not good, that's why I would like to transfer styles differently, but how to do it? I thought to create a separate Heading.css file and write all the styles there, but I don't know how to transfer props there. And is this the right decision. What is the best way to proceed in this case?

  • Answer # 1

    I would use (and still use) Styled Components. There you can set some default values)). But you can just solve all this with the usual tss.

    It's fine to use a component-based approach, but not to the same extent. Firstly, div is not a heading (even in non-indexed content, you need to adhere to semantics, for the sake of decency at least))). Second, get yourself different components for different headings. For example, if there is an h1 on the pages and it is everywhere in a different color (and the rest is the same), then give it one props -a color and this component should not be a div, but h1. And so on for the lower-level headings.