Styling child component from App.jsx

[vikramvi]

App.jsx

....

<div className="twoItemsRow">
          <Input
            inputType="normal"
            titleText="<Input helperText=”Some interesting text” />"
            headerText="Label"
            footerText="Some interesting text"
            placeHolderText="Placeholder"
          />
          <Input
            className="secondChildComponent"
            inputType="error"
            titleText="<Input helperText=”Some interesting text” error />"
            headerText="Label"
            footerText="Some interesting text"
            placeHolderText="Placeholder"
          />
        </div>

....

I wish to style second child component under <div> as below

..
.secondChildComponent {
  background-color: green;
}
...

but it’s not working, is my selector wrong or approach is wrong ?

[veljkocukic]

Is your css working on other elements?

[vikramvi]

Yes, it’s but all the class names are assigned to standard html elements and not react components.
Can you please clarify how to handle react component’s styling in this case ?

[lasjorg]

You have to post a live example or a GitHub link to all the code.

@vikramvi

Yes, it’s but all the class names are assigned to standard html elements and not react components.

Not sure what you mean, the output is always HTML, that is what the styles get applied to. Use the dev tools and inspect the element, make sure the styles are applied and are not overwritten by other CSS (cascade, specificity).

Also, is the Input component your own or from a component library?

[vikramvi]

sorry for late reply on this thread, input component is my own.

I was passing className and expecting it to work with component but this is considered as props and I need to handle inside component itself

Reference

selecting child react component under div is not working in app.jsx file

In order to solve this I followed below approach

<div className="secondChildComponent">
            <Input
              inputType="error"
              titleText="<Input helperText=”Some interesting text” error />"
              headerText="Label"
              footerText="Some interesting text"
              placeHolderText="Placeholder"
            />
          </div>

with this I could target this particular component directly, is this optimum approach or there is better way to do this ?

[vikramvi]

There are 2 components

1. RED
2. BLUE

both are under standard <div> element, I need to place 1st one to the extreme left and 2nd one to extreme right.

What’s optimum way to achieve this result ?

[vikramvi]

I could get it working with styling applied to <div> containing these 2 react components

.header-first-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4rem;
  padding: 0 3rem;
}

but now I’m confused in which case styling react components concept is applicable ?

Is this applicable in current scenario or only applicable when I style individual react component ?

[jsdisco]

What do you mean by “styling react components”, isn’t that what you’re currently doing?

Someone might correct me, but I’m pretty sure that if you have a component like this:

<Component prop={someProp} />

… and you give it a className, what exactly does get that class in the final HTML that is constructed from the JSX? You won’t find any Component in the HTML, only the HTML elements that Component consists of. So those elements are the only thing that you can style with a class, not the Component tag itself.

There’s different ways (or philosophies…) how to apply the styles and where to put them. The “classical” approach is to collect all styles in one style.css file. You could also give each component its own stylesheet and import it, or write the styles inline in the component by defining a style object, so that each component brings its own styles instead of using a “global” stylesheet. But in any case, styles can only be applied to HTML elements.

[vikramvi]

Thanks for reply, I need couple of clarifications

• Let’s say if I wish to apply style only to 1st react component how to do ?

• In my solution; I’ve applied style to div ( standard HTML element ) and not react child components.

Thanks,
Vikram

[jsdisco]

You’d typically create a generic <Input /> component and then pass it some props to define styling. For example:

export default function Input({ bgColor }){
    return (
       <div style={{backgroundColor: bgColor}} >
         <input type="text" />
       </div>
    )
}

Then call it from the parent component like this:

export default function App(){
    return (
      <>
        <Input bgColor='blue' />
        <Input bgColor='red' />
      </>
    )
}

[vikramvi]

Thanks for detailed clarification, it’s clear now.