React-bootstrap Component Font Size

Question

I wanted to manually changed the font size for a ReactJS project. I tried to add something like

* {
    font-size: 10px;
}

and that works with everything that is a plain text. However, every component from react-bootstrap (e.g., DropdownButton, Panel) remains a large font size. Thus, what is the correct way to change the font size for those react-bootstrap components to the same as for other plain text? Inline styling works but I would like the changes to apply to a .css file. Thanks!

Edit: Panel Header code snippet:

  <Panel>

    <Panel.Heading>
      <Panel.Title>
         title here 
      </Panel.Title>
    </Panel.Heading>
  ...

Solution

To change the font-size of all text in your project, use

* {font-size: 10px;}

Alternatively, you can pass a style prop to a component, EX: <Panel.Body style={{fontSize: 10}}

Comments

[Reda Meskali]

Have you tried * {font-size: 10px;}

[vitomadio]

Try body{font-size:10px ! important}

[Mr.cysl]

@VitoMadio Nothing changed :(

[Mr.cysl]

@RedaMeskali I changed the root (App.css) to this and partially that works. However, the font-size for Button and Panel title are still large. Any thoughts?

[Mr.cysl]

Hi Conrad, I changed the root css to this one. Partially that works but Panel title and Button still remain very large. See my edit for a code snippet.

[Conrad Kay]

Hello, have you tried using <Panel.Title style={{fontSize: 10}}?

[Conrad Kay]

Although you probably have done this, i'd import the .css file directly in the component file you are using.

[Mr.cysl]

That works but I am trying to put styles to css files. Since the font is sort of a global setting, I am looking a way that does not require me to do the manually in-line setting. And yes, I am importing the css file. I have other configs for different kinds of components so that should be ok.