Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI?

Currently, I have placed my Header within a div so that I can apply custom styles.

    <div className="portfolioTitle">
      <Header as="h1">Check out this amazing feature</Header>
    </div>

CSS:

   .portfolioTitle {
      padding-left: 10%;
      position: relative;
      padding-bottom: 3%;
      padding-top: 3%;
    }

While this method works, I'm looking for a way to achieve the same result without using a div container. I attempted to follow this solution, but it didn't work for me.

Any suggestions or alternatives? Thank you.

cssreactjssemantic-uisemantic-ui-react

Answer №1

To give a custom className to the Header component, simply use the className prop.

For a working demo, check out this link.

Make sure to add !important to the styles for them to take effect.

Note: Upon inspecting the element, you will notice that the following styles are already applied to the Header by the semantic ui library. If you wish to customize the className with these properties, remember to include !important.

.ui.header {
    border: none;
    margin: calc(2rem - .14285714em) 0 1rem;
    padding: 0 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-weight: 700;
    line-height: 1.28571429em;
    text-transform: none;
    color: rgba(0,0,0,.87);
}

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

Determine the data type of the sole child component in a React application

Is there a simpler way to check if a React element has only one child of a specific type and inject a prop to it if true? The current method I am using seems cumbersome and unclear: Children.count(children) === 1 ? Children.map(children, (c) => ...

reactjs

Personalize the styling of Material UI Tables - final element customization

I've been attempting to adjust the padding of the Material UI Table. The last-child element is receiving a 24px padding which I'm trying to modify. Despite my attempts at overriding the theme and using classes{{root: classes.xxx}}, I haven't ...

cssreactjsmaterial-ui

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

Show a grid layout featuring varying heights using HTML

I am trying to create a grid view for displaying images in an HTML document. I want each li tag to have a different height, but currently they are all the same height. Below is my HTML code: <div class="blog_main_midd_section"><ul> ...

htmlcssgridviewgallery

Unable to specify the width of my website using full-width in Bootstrap

Using the bootstrap grid system has caused a slight issue for me. Whenever I scroll to the right side of the window, there is a white space that appears: I have set the body width as 100vw; Is there a way to eliminate this unwanted space? ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Design a Unique CSS Shape

Do you have any suggestions on how to create this shape using only CSS, without SVG paths? Thank you in advance! Check out the screenshot here ...

cssshapes

Is there a way to determine if a form submit attempt has been made in React Redux?

As I analyze the $form of my form, I notice a variety of boolean properties: focus pending pristine retouched submitFailed submitted touched valid validated validating I am looking to identify whether there has been an attempt to submit the form, regardl ...

reactjsreduxreact-reduxreact-redux-form

Capable of generating accounts using Postman, experiencing difficulties with creating accounts from React

Currently, I am working on a project that utilizes a React/Spring Boot/MYSQL stack and I have encountered an error message stating "POST 415: SyntaxError: Unexpected end of input at line 67". Line 67 is as follows: }).then(res => res.json()) This sect ...

javascriptmysqljsonreactjsspring-boot

Adjust the element's height as you scroll

I am currently experimenting with a method to dynamically increase the height of an element based on user scrolling behavior. Despite trying multiple approaches, I have encountered challenges in getting it to work effectively. The concept is as follows: ...

javascriptjquerycssscrollgaussianblur

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

javascriptjqueryhtmlcssslideshow

In PHP, check if the current iteration is less than 4 in a loop. If it is, then echo a specific

Consider this scenario: I have an array with 7 items and I am trying to separate them in every fourth iteration, just like this: $counter2 = 0; $counter3 = 0; $counter4 = 0; $sample_array = array('Aso','Pusa','Daga ...

phphtmlcss

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

Exploring the possibilities of using hooks with React and Firebase?

I came across a helpful tutorial on utilizing React with Firebase for a basic task of storing text field data in a database. However, I am facing challenges in converting it to utilize Hooks. There seems to be a scarcity of tutorials on using Hooks + Fireb ...

reactjsfirebasefirebase-realtime-databasereact-hooks

The router.push function does not properly redirect to the specified path; instead, it just reloads the current page

I am a newcomer to NextJS and facing a challenge where I need to transfer data from the current page to another page. However, instead of loading the defined path in router.push as pathname: "/booking/checkout/", it loads the current page. I wan ...

javascriptreactjsnext.jsbootstrap-5

React BrowserRouter Route not updating URL

I am facing an issue where my React Router is not changing the actual URL in my browser, even though it changes the component displayed. Below is my app.js: import React, { Component } from 'react'; import './App.css'; import { Browse ...

djangoreactjsreact-routerdjango-urls

Using JavaScript Functions to Resize Buttons and Change function on Click

I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...

javascripthtmljquerycss

How can the toolbar columns menu be displayed by clicking on a custom button located outside the DataGrid in Material UI?

Hello, I was curious if it is feasible to activate certain DataGrid menus by clicking a custom Button that is located outside the component. Thank you in advance. I am unsure of what else to include here, as it is prompting me to write more. It's a b ...

reactjsmaterial-uidatagridcustomization

Is it not possible to call this authentication expression in a Typescript file when using Next JS?

I am currently developing a sign-in method for my Next.js application and I have been referring to the GitHub repository's recommended documentation. However, upon reaching the authentication folder step, I encountered an error regarding the sign-in ...

reactjstypescriptnext.jsnext-auth

My form does not receive the Bootstrap classes when using the jQuery script

**Why isn't my jQuery script coloring the rows as expected when certain conditions are met (I italicized the specific part of the code)?** Here is the HTML CODE for the POLL: <form id="pollForm" class="mb-4"> <d ...

javascripthtmljquerycssbootstrap-5

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

javascripthtmlcssjsonslicknav