React - applying css via className to imported Component

Question

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!

Ismael Padilla · Accepted Answer · 2019-12-29 18:04:03Z

1

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>
    }
}

answered Dec 29, 2019 at 18:04

Ismael Padilla

5,6065 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - applying css via className to imported Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related