React ignores CSS rule

Question

React ignores CSS rule

I am currently utilizing React to design some buttons and using CSS to style them accordingly. One of the classes I have created is called Button:

export default class Button extends React.Component{
  public className: string;

    constructor(props){
      super(props);
      this.className = props.className ? props.className : "";
    }

    public render() {
      return (
        <button className = {this.className}>
          {this.value}
        </button>
      );
    }
  }

This is the CSS code I have implemented:

.my-css {
    width: 300px;
    height: 200px;
    border-radius: 8px;
}

And here is how I am using it:

<Button className = "my-css" value = "Test" />

I am puzzled as to why my rule does not seem to be loaded when inspecting the page. Can anyone provide an explanation for this?

Any help would be greatly appreciated! :-)

css reactjs jsx

Answer 1

Answer №1

It's important to reference your props directly within the render method:

export default class CustomButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button className={this.props.className}>
        {this.props.text}
      </button>
    );
  }
}

Answer 2

It's important to reference your props directly within the render method:

export default class CustomButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button className={this.props.className}>
        {this.props.text}
      </button>
    );
  }
}

Answer 3

Answer №2

Make sure you have included the css file in your project. If you missed adding it, you can do so by importing it into your main index file using "import 'path to your css file'". If the css file is already loaded, then you can proceed with updating your code as shown below.


export default class CustomButton extends React.Component {
    constructor(props) {
        super(props);
   }

public render() {
   const { className = '', value = ''} = this.props;
   return (
       <button className={className}> 
           {value}
       </button>
   );
}
}

Answer 4

Make sure you have included the css file in your project. If you missed adding it, you can do so by importing it into your main index file using "import 'path to your css file'". If the css file is already loaded, then you can proceed with updating your code as shown below.


export default class CustomButton extends React.Component {
    constructor(props) {
        super(props);
   }

public render() {
   const { className = '', value = ''} = this.props;
   return (
       <button className={className}> 
           {value}
       </button>
   );
}
}

Answer 5

Answer №3

One way to style your button: If you want to customize the appearance of a button, you can define a CSS object in your code.

const myButtonStyle = {
  'width': '300px',
  'height': '200px',
  'borderRaduis': '8px'
};

You can then apply this style to your button element like so:

<button style={myButtonStyle} />

Another method:

Create a separate CSS file for your styles
Import the CSS file into your JavaScript file using
```
import classes from 'your-file-location.css'
```
Apply the style to your button using the imported class name:
```
<button className={classes.my-button-style} />
```

Answer 6

One way to style your button: If you want to customize the appearance of a button, you can define a CSS object in your code.

const myButtonStyle = {
  'width': '300px',
  'height': '200px',
  'borderRaduis': '8px'
};

You can then apply this style to your button element like so:

<button style={myButtonStyle} />

Another method:

Create a separate CSS file for your styles
Import the CSS file into your JavaScript file using
```
import classes from 'your-file-location.css'
```
Apply the style to your button using the imported class name:
```
<button className={classes.my-button-style} />
```

React ignores CSS rule

Answer №1

Answer №2

Answer №3

Similar questions

Ways to address unusual actions from Next/Link when used within a button

Retrieve a markdown file from the system and render it as a string using React.js

Tips for decreasing the height and dimensions of a Material-UI<Select> input field within a Material UI and formik interface

Tips on maintaining the original text hues that were established using setForeground() when a QTableWidgetItem is picked

Using jQuery and Bootstrap in an ASP.NET Core project

Utilizing Three.js to Upload Images and Apply Them as Textures

using flexbox in react does not automatically resize

Tips for merging various classNames in React?

How to use AngularJS to collapse various panels with unique content

There was an error loading the resource as the Object does not have the method 'adGallery'

I'm having trouble with axios.get when trying to search for a product by name

Select multiple checkboxes one at a time with the help of React Hook Form

What is the process for submitting information to my Next.js API endpoint?

Mastering a personalized domain integration with React on Github Pages

What is the best way to update and override multiple nested NPM dependencies with various versions?

Arranging shapes for optimal placement on a web page

What is the method for enlarging an element without regard to surrounding elements?

Access Django admin without the need for traditional login by implementing an alternative authentication method

Ways to access the npm script arguments within a ReactJS project

Creating a capsule-shaped button using HTML and CSS: