Question 167565 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is there a way to edit styles of span in an option in React Select?

I just wanna know, if there is a way to change the span’s font size. How can we refer to it?

import React from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: I need to change the span below: <br><span>Hi, I am going to be a little be smaller</span> },
]

const MyComponent = () => (
  <Select options={options} />
)
Tags:

2

Answers


  1. 0

    try this:

    import React from 'react';
import Select from 'react-select';

const options = [
  {
    value: 'chocolate',
    label: (
      <>
        I need to change the span below:
        <br />
        <span style={{ fontSize: '0.8em' }}>
          Hi, I am going to be a little bit smaller
        </span>
      </>
    ),
  },
];

const formatLabel = ({ label }) => <>{label}</>;

const MyComponent = () => <Select options={options} formatOptionLabel={formatLabel}/>;

    formatOptionLabel

    Formats option labels in the menu and control as React components

    (...) => ...

    References

    react-select docs

    Login or Signup to reply.
  2. 0

    You can try adding a style attribute to the span tag and set the font size you want in there.

    You can explore more ways to style react-select elements in the docs: https://react-select.com/styles

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search