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

Angular 4 allows the addition of an image from right to left upon clicking

I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...

htmlcssangular

MUIDataTable: How to vertically display a Checkbox List for columns in the viewColumns options of a React application

In my MUI Table Implementation, I have set the options object viewColumns to true. This is supposed to display a popper for choosing columns in a vertical list of checkboxes, but instead, it is showing horizontally as seen in the screenshot below: https:/ ...

reactjsmaterial-uimui-datatable

Creating a Background Image Using CSS3: A Step-by-Step Guide

Hey there! I'm trying to figure out how to recreate the image attached using CSS3. I've tried a few online tools for generating gradients, but no luck so far. :( I have the original image, but I really want to create the background using CSS3 in ...

cssbackground

Adjust the dimensions of the canvas without disrupting the existing artwork

I am currently working on a pixel art application where I am facing an issue with saving images from the canvas. The saved image appears small and pixelated when I try to resize it. I would like to resize the image to larger dimensions, but I am unsure of ...

javascripthtmlcsscanvas

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

I am puzzled by a JavaScript fiddle I created which contains two small boxes inside a larger box. Upon clicking either of the buttons labeled "Run B" or "Run C", the corresponding box undergoes a CSS transition that is controlled by JavaScript. Below is t ...

javascriptcss

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

Are there any methods to synchronize the setState function in React?

It is common knowledge that setState operates asynchronously. I have come across several questions on how to use the value immediately after setState, but those solutions are not what I am currently seeking. My goal is to set a value for an array List and ...

reactjs

Animating the process of eliminating a background image

I am working on a project with a div that has a background-image. The goal is to make the image fade away when a button is clicked, and then fade in again when another button is pressed. The focus is on only fading the background image while keeping the co ...

jqueryhtmlcssanimationjquery-animate

It seems like the Next.js middleware.ts file is running twice, which may also be causing the app to render twice

After investigating the middleware, we discovered that it is executing functions twice, including the application itself. To troubleshoot this issue, I removed the "favicon" from a matcher in the resources where middleware is used because there were talks ...

reactjsnext.jsmiddleware

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascripthtmlreactjsreduxmaterial-ui

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...

htmlangularcss

The type 'Store<unknown, AnyAction>' is lacking the properties: dispatch, getState, subscribe, and replaceReducer

I have configured the redux store in a public library as follows: import { configureStore } from '@reduxjs/toolkit'; import rootReducer from '@/common/combineReducer'; import { createLogger } from 'redux-logger'; import thunk ...

reactjstypescriptredux

Is it necessary to use state if I have a static list of items containing titles and descriptions that I want to utilize across several individual components?

These instructions are part of a process that involves the following steps: [ { title: 'Upload file', description: 'This step allows you to upload your file and ....'}, { title: 'Pick a color', description: 'You have ...

reactjsreact-hooks

Steps for showcasing stars (1-5) based on the data stored in the database

I recently completed a project where I created a user achievement page that displays their progress. Within the page, there is a table containing the user's level. The table structure looks like this: Users( id, username, password, sum_score, level) ...

phphtmlcss

This error message has been thrown on line 173 of the events.js file due to an unhandled error event

I am encountering an issue with running the "npm start" command. The error message I receive is as follows: node -v : v12.0.0 npm -v : 6.9.0 I have attempted to reinstall all the necessary software, and even adjusted the port number in an attempt to troub ...

reactjsnpm

The alignment of the footer navigation is off-center

I can't seem to get my footer navigation centered properly. I've tried adjusting the CSS but it's still not working as expected. .main-footer li { float: left; font-size: 0.85em; padding: 0 0.5em; margin-bottom: 0.5em; } .main-fo ...

csscss-floattext-align

How can I show only the final four digits of an input field using Angular Material and AngularJS?

As a newcomer to Angular Material and Angular JS, I am striving to create an md-input field that displays only the last 4 digits in a masked format, such as "********1234". While my experience is currently limited to using md-input password fields where ...

javascripthtmlcssangularjsangular-material

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

htmlcssvideo