CODEWITHSUNDEEP
javascriptcssreactjs
Shibasis Sengupta
Shibasis Sengupta

Reputation: 649

Style does not get added after Importing css into React component

I have this class in a CSS file (TextBoxStyle.css) -

.CustomTextBox{
width: 100%;
border-radius: 4px;
height: 30px;
}

Then I am trying to use this in a React component -

import React from 'react';
import ReactDOM from 'react-dom';
import styleClass from  './TextBoxStyle.css';

export class TextBox extends React.Component{

render(){      
                return  (
                <input className={styleClass.CustomTextBox}>
                </input>
                );
}
}

My project gets build successfully as I have installed all necessary loaders through webpack.

However, the class 'CustomTextBox' does not show up in my final html page.

Please let me know if I need to elaborate on any point. Highly appreciate any help.

Upvotes: 2

Views: 103

Answers (1)

Scott
Scott

Reputation: 3765

If you don't absolutely need to reference CustomTextBox, you could try importing the CSS directly like so:

import './TextBoxStyle.css';

Then change the className on the input like so:

<input className="CustomTextBox">

Upvotes: 3

Related Questions