The size of the panel header does not seem to be adjusting as expected within the React

I need help adjusting the header size in a React-Bootstrap Panel within a Typescript application. I've tried wrapping the text in <h1> tags as specified in the documentation, but there seems to be no change.

Even with attempts to add inline styles or a CSS class to adjust the font size, nothing seems to work.

Below is the code snippet:

const title = (<h1>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

Would appreciate any suggestions on how this could be achieved effectively?

cssreactjsbootstrap-4react-bootstrap

Answer №1

http://jsfiddle.net/L5tLot9h/

Because the panel-title class comes with a default font-size, you must use !important to override the previously set CSS.

const title = (<h1 style={{fontSize: '80px !important'}}>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

Why aren't the font-size styles applied to elements like h1 or h2?

It is because of the existing font-size property in the panel-title class that takes priority over the heading elements.

How can this be fixed?

You can either use inline styles with !important as demonstrated above, or increase specificity by adding additional tags, ids, or classes to the selector.

or

You could also define a CSS rule with the same selector later in the stylesheet (the last one defined wins).

CSS file

h1.panel-title {
    font-size: 36px;
}
h2.panel-title {
    font-size: 30px;
}
h3.panel-title {
    font-size: 24px;
}
h4.panel-title {
    font-size: 18px
}
h5.panel-title {
    font-size: 14px
}
h6.panel-title {
    font-size: 10px;
}

Answer №2

If you want to achieve this, you can follow the example provided here

var {Button, PanelGroup, Panel, ButtonGroup, DropdownButton, MenuItem} = ReactBootstrap

const titleStyle = {'fontSize': '50px'}

const title = <h1 style={titleStyle}>Tarun</h1>;

const nav = ( <PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>);


var mountNode = document.getElementById("app")
ReactDOM.render(nav, mountNode);

You can also access a live demo on JSFiddle given below

http://jsfiddle.net/6u0eaqur/1/

Once you implement it, you should see the following result

Why isn't the font size changing with h1, h2, or h3 tags?

The font-size is not changing because the React component assigns a panel-title class with a specified font-size of 16px, overriding any tag-specific styles.

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

Send a property as a string, then transform the string back into JavaScript

I am in the process of creating a versatile carousel that will cater to various conditions. Therefore, I need to set the "imageQuery" on my display page as a string and then make it work as executable javascript within my carousel. The query functions pr ...

javascriptreactjsnext.js

Aligning content in CSS for cross-browser compatibility with Internet Explorer and Chrome

My CSS grid has grid items that can easily be centered in Chrome by using the justify-items:center property, creating a magical effect. However, this solution does not work in Internet Explorer as the items remain stuck to the left side. For reference: ht ...

htmlcssgoogle-chromeinternet-explorer-11css-grid

Connecting an admin dashboard to a MERN e-commerce application: A step-by-step guide

In the process of developing an e-commerce platform, I find myself using React.js for the frontend and Node.js/Express.js for the backend. My current challenge lies in creating a seamless dashboard to manage items within the app. One possible solution wo ...

javascriptreactjsexpressadminmern

The CSS selector within the website's URL

When a URL like www.example.com/#signup is entered, the browser focuses its view on the HTML element with the ID signup. Is this correct? Can the CSS style of the element be changed if it is focused in this way? For example, if there is a div element wit ...

htmlcssurlcss-selectors

There appears to be an issue with getting RadioGroupButton to function properly in React Starter Kit

Check out this awesome gif: It seems that whenever I try to click on it, nothing happens. Here's the code snippet that is functioning correctly in webpack: However, in my initial setup environment, it doesn't function as expected. Strangely, c ...

reactjsreact-routermaterial-uireact-starter-kitformsy-material-ui

CSS: Using absolute and relative positioning within a parent element can result in elements overlapping

I want to create a box in html/css where the read more hyperlink text is positioned over the background image. The goal is to have additional text added to the description without overlapping the image. Here's an example of the current issue. Curren ...

htmlcsssass

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

I recently completed a website and designed an awesome navigation bar in a separate file. However, when I combined them together, the navigation bar disappeared. The background of my "list" div should be filled in and larger, but it's not working as e ...

htmlcssuinavigationbar

Expanding the navbar with Bootstrap 3.0 by using the navbar-brand class

I'm facing an issue with the navbar-brand while adding my logo. I am using the latest version of bootstrap CSS from getbootstrap.com, and the problem is also evident there: The navbar becomes slightly oversized when the logo is included. However, if I ...

csstwitter-bootstrapnavbar

Tips for selecting a specific item in a list using onClick while iterating through a JSON array in React

I have a unique JSON file filled with an array of objects, each containing a "Question" and "Answer" pair (I am working on creating an FAQ section). My current task involves mapping through this array to display the list of questions, a process that is fun ...

javascriptjsonreactjsreact-hooksmaterial-ui

Tips for ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

javascripthtmlcss

Send a changing value to a more advanced component

I have encountered a situation in my code where I need to reuse the same lines of code in multiple places. This seems like the perfect opportunity to extract this code into a base class. After researching about Higher-Order Components, I attempted to imple ...

reactjshigher-order-components

Enhancing a React modal to enable user input for updating state variables

Is there a way to utilize user input from the page to dynamically create elements in a React.js application? In my app.js file, I have defined some constants at the beginning for mock data: const book1 = [ {id: uuid(), content: 'reflections&apos ...

javascriptreactjsuser-interfacefrontendrefinejs

Tips for eliminating the left and bottom border in a React chart using Chart.js 2

Is there a way to eliminate the left and bottom borders as shown in the image? ...

javascriptreactjsnext.jschart.jsreact-chartjs-2

Arranging containers in a fixed position relative to their original placement

A unique challenge presents itself in the following code. I am attempting to keep panel-right in a fixed position similar to position: relative; however, changing from position: relative to position: fixed causes it to move to the right side while the left ...

javascripthtmlcssreactjsflexbox

The CSS method for changing the content URL is experiencing difficulties in Firefox

Css: .woocommerce-placeholder.wp-post-image { content: url("DSC0926-1.jpg"); } /*for firefox*/ .woocommerce-placeholder.wp-post-image::before { content: url("DSC0926-1.jpg"); } HTML <img src="placeholder.png" alt="Placeholder" class="woocomm ...

css

What is it about Next JS and React JS applications that causes them to use up so much cache?

"What causes Next.js and React.js applications to need a large cache, and how does this affect their performance and resource usage?" Refreshing constantly for even small changes in the application as a developer can be frustrating. Are there an ...

javascriptreactjscachingnext.jsserver-side-rendering

Simple dilemma: extracting values from a form component and transferring them to the App

After diving into the formik documentation and numerous tutorials, I'm still struggling to grasp the fundamental concept of formik and forms. My project involves generating random gamer tags for users to rate and organize as a way for me to learn Rea ...

reactjsformik

How to line up two blocks side by side in a single block with Bootstrap without the use of CSS

The bootstrap margin is causing issues with this code <div class="row"> <div class="row1 col-lg-3"> <div class="row2 col-lg-1"></div> <div class="row2 col-lg-1"></di ...

htmlcsstwitter-bootstrap

What steps can I take to personalize Material UI within a React application?

As someone who is new to this UI framework and React, I have been tasked with developing an application that requires more design patterns. I specifically chose a framework that does not depend on jQuery code. However, I am facing challenges when it comes ...

javascriptreactjsmaterial-ui

Is your content flickering and constantly re-rendering due to the Next.js router.query?

One issue I'm facing is with a page that relies on router.query to determine the content to display. The problem arises when the page initially renders without any data from router.query, causing a noticeable "flickering" effect once the relevant cod ...

reactjsnext.jsurl-routing