Styling elements in a React component with CSS to give each item a unique look

Question

Styling elements in a React component with CSS to give each item a unique look

My React component, called "Badge", returns text that has bold styling.

render() {
 return (
  <div>
   <Text weight={'bold'}>
    {this.props.label}
   </Text>
  </div>
)

Now, I am using the "Badge" component within another one named "Card".

Since all text in the Badge component is styled as bold, any sentence it renders will also be in bold:

return (
 <div>
  <Badge label={'This part of the sentence is ' + 'normal font style' + ' and the rest is bold.'}></Badge>
 </div>
)

I want to style specific parts of this element differently, so I attempted to remove the bold style from 'normal font style' - just for this segment. However, my current approach isn't working:

<Badge label={'This part of the sentence is ' + <span class=”normalText”>'normal font style'</span> + 'and the rest is bold.'}></Badge>

As a beginner, I find this issue quite frustrating. Any suggestions on how to tackle this problem?

css reactjs

Answer 1

Answer №1

If you need to include html tags in your text, make sure to pass the entire content with the html formatting. See the example code below.

import React, { Component } from 'react';
import ReactDOM,{ render } from 'react-dom';
import Badge from './Badge';
import './style.css';

class App extends React.Component {
  render() {
    return (
      <div>       
       <Badge label="test" /><br/>
       <Badge label={'This part of the sentence is ' + 'normal font style' + ' and the rest is bold.'} /><br/>
       <Badge label={<>
          <span>This part of the sentence is</span> <span className="normalText">'normal font style'</span> <span> and the rest is bold.</span> 
        </>}
       />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

I've put together a small demo for you.
https://stackblitz.com/edit/react-rvuqv6

Hope this solution meets your needs! Enjoy coding. 😊

Answer 2

If you need to include html tags in your text, make sure to pass the entire content with the html formatting. See the example code below.

import React, { Component } from 'react';
import ReactDOM,{ render } from 'react-dom';
import Badge from './Badge';
import './style.css';

class App extends React.Component {
  render() {
    return (
      <div>       
       <Badge label="test" /><br/>
       <Badge label={'This part of the sentence is ' + 'normal font style' + ' and the rest is bold.'} /><br/>
       <Badge label={<>
          <span>This part of the sentence is</span> <span className="normalText">'normal font style'</span> <span> and the rest is bold.</span> 
        </>}
       />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

I've put together a small demo for you.
https://stackblitz.com/edit/react-rvuqv6

Hope this solution meets your needs! Enjoy coding. 😊

Answer 3

Answer №2

A more suitable approach would be to include the label value as children of the badge. To create the Badge component, use the following code snippet:

const Badge = props => {
    return (
       <div className={`badge-class`}>
          <Text weight={'bold'}>
              {props.children}
          </Text>
       </div>
    )
}

You can now utilize the component like this:

return (
   <div>
      <Badge>
          This section of text is in <span className={`normal-texts`}>normal font style</span> while the remainder is bold.
      </Badge>
   </div>
)

This way, you have the flexibility to pass various types of children to the Badge component such as text or images.

Answer 4

A more suitable approach would be to include the label value as children of the badge. To create the Badge component, use the following code snippet:

const Badge = props => {
    return (
       <div className={`badge-class`}>
          <Text weight={'bold'}>
              {props.children}
          </Text>
       </div>
    )
}

You can now utilize the component like this:

return (
   <div>
      <Badge>
          This section of text is in <span className={`normal-texts`}>normal font style</span> while the remainder is bold.
      </Badge>
   </div>
)

This way, you have the flexibility to pass various types of children to the Badge component such as text or images.

Styling elements in a React component with CSS to give each item a unique look

Answer №1

Answer №2

Similar questions

I'm looking to customize the React Material UI responsive drawer by removing the padding from the Toolbar

Error message "Attempting to utilize undefined or null as an object" appears while defining props such as "onGridReady" or "rowSelection" in React components

Utilize an asynchronous arrow function to render JSX components

The image is failing to load - local resources are prohibited from rendering

Using pixel values to define CSS gradient color stops from the end

Executing an asynchronous action without linking promises to subsequent actions

Adjust vertical dimension using rich text editor tag

How come ng-class doesn't apply to a specific class name?

H1 and span elements experiencing abnormal size discrepancies

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

Could you walk me through the details of this React function?

css center arrow-aligned underline text

The scss function is returning an invalid property value

How can I align rectangles with different heights to display side by side using Javascript?

Is there a way to move the cards to the next line within a wrapper when the screen size is reached?

Creating a customized TextField look with styled-components and Material-UI's withStyles feature

Changing the title of your document and app bar in React Router when navigating pages

What is preventing me from adding a margin to the div directly? Why must I apply a margin to the child in order to affect the div's margin

How can I switch the header bar button from "login" to "logout" in a React

Understanding the appropriate roles and attributes in HTML for a modal backdrop element in a TypeScript React project