React component and CSS: style items in the same element differently

Question

I have a React component named "Badge" returning some Text that is styled bold.

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

Now, I use "Badge" in another component named "Card".

Because in Badge component all Text is styled bold, the whole sentence is bold as well:

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

Now, I would like to style the items in this element differently: I want to remove the bold style from 'normal font style' - only for this single part of the string. I already tried this way, but it doesn't work:

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

As an absolute beginner, this problem is driving me crazy. Any ideas how to solve this?

Expose the Text weight prop to your Badge API, i.e. <Badge label='This is bolded text!' weight='bold' /> — Drew Reese
– Drew Reese, Commented Sep 9, 2019 at 7:35
Does the Badge do anything other than contain s div and a Text component? Perhaps you could rewrite it a bit to be more of a container and it simply renders whatever children it contains (with whatever style they may have). — Drew Reese
– Drew Reese, Commented Sep 9, 2019 at 7:38
Hello Drew, the problem is, I am not allowed to modify the badge component. I have to use it as it is :( — RuntimeError
– RuntimeError, Commented Sep 9, 2019 at 7:40
Well then you may have to create a new component then as React will pretty much escape everything it renders (save for some judicious use of dangerouslySetInnerHTML which wouldn't work here as the Badge is only rendering a label into another react component). Why are you barred from modifying Badge? — Drew Reese
– Drew Reese, Commented Sep 9, 2019 at 8:05

user11910739 · Accepted Answer · 2019-09-09 09:16:09Z

1

If you want to pass the text with html tag then you have to pass all the text/tags in html form. Check below code.

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 have created small demo for you.
https://stackblitz.com/edit/react-rvuqv6

Hope this will work for you!

answered Sep 9, 2019 at 9:16

user11910739

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

2 Comments

RuntimeError Over a year ago

Thanks a lot! Unfortunately, this version throws the error: "Type 'Element' is not assignable to type 'string'."

user11910739 Over a year ago

I am using custom component where pass details in label as props. If you are still facing same issue then please let me know the name of package for Text or Badge.

Nasir Uddin · Accepted Answer · 2019-09-09 09:32:02Z

0

The more appropriate system is take label value as badge's children. to declare Badge component code like this example:

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

and now call the component like this

return (
   <div>
      <Badge>
          This part of the sentence is <span className={`normal-texts`}>normal font style</span> and the rest is bold.
      </Badge>
   </div>
)

with this you can pass any type children on Badge component, text, image etc.

answered Sep 9, 2019 at 9:32

Nasir Uddin

1913 bronze badges

Collectives™ on Stack Overflow

React component and CSS: style items in the same element differently

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related