The CSS styles seem to be slipping through the cracks in ReactJS

I've been trying to figure out the best way to include styles from an external CSS file in a ReactJS component. I initially tried referencing the class or id within the CSS file and applying styling that way, but it wasn't working as expected.

var ProfilePanel = React.createClass({
  render: function() {
    return (
      <div>
        <p class="profile-text">{this.props.text}{this.props.children}</p>    
      </div>
    );
  }
});

In my CSS file, I have:

.profile-text{
  font-size: 10px;
}

Answer №1

You have utilized the class attribute which is typically reserved for JavaScript. To rectify this issue, use className instead.

Learn more

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Middleware in Express routes are only functional within a class

It seems that when routes are added outside the Server class, middleware is ignored when making requests. Is there a solution to this issue? I understand that placing the routes inside the Server class would resolve the problem, but I specifically need it ...

Merge and filter unidentified subsets of objects within an array comprised of multiple objects

a more efficient way to achieve the desired output of this code snippet is by checking if sub array 0 exists, combining it, and then filtering the result based on the key code. Your assistance is greatly appreciated! let array = [ { id: 1, te ...

Styling checkboxes using jQuery and replacing them with images

I'm looking for help with a script that will hide my checkboxes and replace them with styled checkbox images. The script I have hides the checkboxes and displays the default image, but it doesn't update the checkbox state or image when clicked. I ...

Verification message appears once the SQL database has provided the necessary information to the data table

function alertbox() { var mode = document.getElementById('<%= hdnMode.ClientID %>').value; if (mode == "EDIT") return false; if (confirm("Is the same data present against that ID?") == true) { document.getElemen ...

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

Unable to set initial values for Select Option in Redux-Form

I have implemented an update form using redux-form, where the form value is initialized using initialValues. For example: <DataEdit initialValues={ Data }/> The form in the DataEdit page looks like this: <Field name="Data.taxTitle" comp ...

Floating DIVs wrapped in a responsive layout

I can't help but wonder if I have a layout like this: <div class="container"> <div class="left"> Left </div> <div class="right> Right </div> </div> Changing the view port to 320 pixels requires the right div to ap ...

Is there a way to first run my validate function and then proceed with sending my AJAX request upon clicking a button?

Hey there! I've got a dynamic table generated from a database. You can check out the table. I have all the necessary code in place, but what I really need is to ensure proper timing of execution for specific actions: 1) Verify if all mandatory fields ...

Layer images of the same size in a seamless overlap on top of another image

As a novice web developer, I am aiming to stack two images perfectly on top of each other in my project. The application I am working on checks the correctness of user inputted answers by displaying either a checkmark or an "X" mark accordingly. To achieve ...

How to Send Data to views.py in Django Using JavaScript Onclick Event?

I have some knowledge about using ajax with JavaScript to send data to views.py, but I am struggling to successfully implement it. My goal is to trigger the onclick event on an image to send a certain value to views.py when clicked. Below is the content ...

After deploying my Next.js app to Vercel, I encountered a problem where the rss.xml file in the public folder was returning

I have successfully created an rss.xml file and wrote it using fs.writeFileSync. It works fine when viewed locally, but on vercel, the build fails with an error stating "no such file or directory ./public/rss.xml." If I comment out the fs.writeFileSync li ...

Having trouble getting my AngularJS animations to work, hitting a roadblock

Here is the code I've put together for you to review, with no official purpose in mind. I just saved this code to use at a later time. <script> var apps = angular.module('myApp', ['ngAnimate']); //header apps.cont ...

Immerse Yourself with Ken Burns Effect and Crossfade in Bootstrap 4's

I am aiming to implement a zoom in "Ken Burns" effect and a crossfade transition between slides using Bootstrap 4 carousel. The zoom effect should last for 6 seconds, while the fading transition should be completed in 1 second. Additionally, I want the car ...

Encountering a 401 Unauthorized error while attempting an AJAX call to an ASP.NET Web API endpoint that has Windows authentication activated

After creating a basic ASP.NET web API application, I implemented Cross-Origin Resource Sharing (CORS) using the Microsoft.AspNet.WebApi.Cors package. This is what my controller looks like: public class UserController : ApiController { [Route ...

Tips for delaying the evaluation of an input field

I have a field for a product where the quantity depends on another product's quantity (must be between 70% and 100%). The issue is, it evaluates so quickly that if the main field is '100', I can't enter '75' in the other field ...

Is there a way to showcase a lightbox exclusively on the homepage of my blogger blog?

Here is the snippet of code I am struggling with: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/> <script src='https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.color ...

Sliding over absolute positioned elements using CSS relative positioning to create hover effects

I'm in the process of creating a game where I want to prevent users from resizing or scaling the screen without causing issues. The game consists of one large background with dynamic elements overlayed on top. Currently, the elements are not scaling ( ...

Angular HttpClient not recognizing hashtag

I'm trying to make a REST API call, but running into issues with the developerId parameter being sent incorrectly: let developerId = "123#212"; let url = \`\${Constants.BASE_URL}\${marketId}/developers/\${developerId}\`; retur ...

Having trouble extracting primary color from image with Microsoft's Computer Vision

I've hit a roadblock with this dilemma that has been perplexing me for quite some time now. My goal is to determine the dominant color of an image using Microsoft's Computer Vision service. A snippet of my code can be seen below: import {VisualFe ...

What is the best way to incorporate JSON into my views?

As a newcomer to using JavaScript, I've encountered a little issue. I am working on an Angular JS application where my service /api/service returns JSON with all users in the database. I have a Factory named "UsersFactory.js" and my Controller is ca ...