How can I emphasize only a portion of a word in ReactJS and Material UI?

I am attempting to replicate this design: https://i.stack.imgur.com/H8gKF.png

So far, this is what I have been able to achieve: https://i.stack.imgur.com/TJXXb.png

My project utilizes Material UI and ReactJS. Below is a snippet of the code:

bodyTitle: {
fontWeight: 800,
paddingTop: theme.spacing(5),
paddingBottom: theme.spacing(3),
color: "white",
display: "inline-flex",
flexGrow: 1,
width: "75%",
textDecoration: "underline",
textDecorationColor: "blue",

},

 <Typography variant="h4" className={classes.bodyTitle}>
    Upcoming
 </Typography>

Any suggestions on how to underline only half of a word?

cssreactjsmaterial-ui

Answer №1

One potential approach to consider is as follows:

<span className={classes.Classname}>Up</span>coming

.Classname{ textDecoration: "underline", textDecorationColor: "blue" }

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

The art of replacing material-ui styles with styled components

As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...

javascriptcssreactjsmaterial-uistyled-components

Implementing Material design using the Material-UI library in a

I have a straightforward inquiry. I am eager to delve into react native development. Uncertain about incorporating material-ui. Can it be integrated with react native? Your assistance is greatly appreciated. ...

react-nativematerial-ui

What steps can I take to resolve the error message 'throw er; // Unhandled 'error' event' in my code's lifecycle?

Attempting to create a React app, I utilized the command prompt. Unfortunately, upon creation of the app and trying to start npm, various errors were encountered. In an attempt to create React apps using WebStorm, IntelliJ, Visual Studio Code, and PowerSh ...

node.jsreactjsnpmcmdwebstorm

How can I efficiently fetch data from Firebase, manipulate it through computations, and present it using React Hooks?

I am currently working on retrieving multiple "game" objects from Firebase Storage, performing statistical calculations on them, and then presenting the game statistics in a table. Here is an overview of my code structure: function calculateTeamStatistics( ...

javascriptreactjsfirebaseasync-awaitfirebase-storage

What is the method to activate map dragging in Leaflet only while the spacebar is pressed?

When using Leaflet maps, the default behavior is to drag the view around by only clicking the mouse. However, I am interested in enabling dragging with the mouse only if the spacebar is pressed as well. I would like to reserve mouse dragging without the sp ...

javascriptreactjsleafletmapbox

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...

javascripthtmlcss

How to obtain the height of the parent screen using an iframe

Imagine a scenario where a div contains an image that is set to perfectly fit the height of the screen. This setup works flawlessly, with one exception - when placed within an iframe, the height of the div adjusts to match the content's height rather ...

javascriptcssiframe

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

Limit the size of images with CSS properties like max-height or max-width

What is the preferred method for restricting the size of an image and why? While max-width can be used to restrict the size of an element, this article recommends using it specifically for images within containers. If you have a web application with a ve ...

css

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

Ways to declare a function within the events onMouseOver and onMouseOut

<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}"> Register & ...

javascripthtmlcss

A Guide to Launching and Hosting a React Application on an Apache Server

After completing my dashboard project using "React js" for Frontend and "Node js" for Backend, I encountered an issue when trying to deploy and host it on an Apache server. Despite running "npm run build" and transferring all the files from the build folde ...

node.jsreactjsapacheproduction

Attempting to optimize the onSubmit feature by utilizing Formik

Currently enhancing my development skills by working with React. I am looking to streamline the onSubmit property in my project. The application is a contact form built using the Formik component, which uploads data to Firebase Cloudstore and sends an emai ...

reactjsmaterial-uirefactoringformik

Using boolean values as react-element component props is a requirement when dealing with material-ui list items

I'm fairly new to React and my question might sound a bit basic... I have a material-ui list-item component, and I want to show an edit icon only for the owner of the content. Here's an example: var rightAction = (this.props.canEdit)?<Ico ...

reactjsmaterial-ui

Having trouble aligning the unordered list with the input

Can anyone help me troubleshoot my CSS so that the list appears below the input field? Check out this example The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing ...

htmlcss

Changing the visibility of a button based on a checkbox in JavaScript - here's how

Just starting out with JS and working on a react project. I need to toggle the visibility of a button from false to true when a checkbox is checked. Here's my code, I believe the logic is correct but it's not updating the UI. Any suggestions are ...

javascriptreactjsreact-hooksevent-listener

Is it possible to implement UseState in Server-Side-Rendering scenarios?

Is it possible to utilize useState (and other react hooks?) with Server Side Rendering? I keep encountering the following error when attempting to execute the code: TypeError: Cannot read property 'useState' of null. Oddly enough, if I disable ...

javascriptreactjsnext.jsreact-hooks

Removing a CSS Class Using Tampermonkey: A Step-by-Step Guide

I'm completely new to CSS and javascript, so please bear with me. My goal is to remove the class disable-stream from each of the div elements located under the div with the class "stream-notifications". Below is an image for reference: Even though I ...

javascriptjqueryhtmlcsstampermonkey

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

htmlcsstwitter-bootstrap