CODEWITHSUNDEEP
cssreactjswebjsx
chacha
chacha

Reputation: 99

React - applying css via className to imported Component

I'm new to react and I have a quick question about styling imported components. I made a basic Title component that simply outputs the props passed. My Title.js file:

import React from 'react';
import '../App.css'

class Title extends React.Component{
    render(){
        return <h1>{this.props.prop}</h1>
    }
}

export default Title

I'm using it in my App.js file and trying to style it via a className

import React from 'react';
import Title from './components/Title'
import './App.css';

function App() {
  return (    
      <Title className = 'title' prop = 'Title!'/>    
  );
}

export default App;

my css:

.title{
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  border: solid black; 
}

This does not works, even if I apply an inline style to the Title tag. However it does works when I apply the className to the h1 tag within the Title.js file. Is it because everything written within the Title tag is just passed as a prop? If that's true how are third-party library components styled? Any help is much appreciated!

Upvotes: 1

Views: 917

Answers (1)

Ismael Padilla
Ismael Padilla

Reputation: 5566

In order for this to work the way you want to, you need to pass the className prop form your Title component to the h1 inside it:

class Title extends React.Component{
    render(){
        return <h1 className={this.props.className}>{this.props.prop}</h1>
    }
}

Upvotes: 1

Related Questions