Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui.

Trying to nest buttons within buttons is considered not allowed.

An approach that works is manually assigning the className prop:

<ButtonBack className={"MuiButtonBase-root MuiButton-root MuiButton-contained"}>
  <NavigateBeforeIcon />
</ButtonBack>

However, this method doesn't feel quite right and also lacks the aesthetic appeal of a real Mui-Button.

While one option could be writing custom CSS to mimic Material-UI styling, this also doesn't seem ideal.

I'm wondering if there is a simpler or more straightforward solution to this issue?

javascriptcssreactjstypescriptmaterial-ui

Answer №1

import { ButtonFirst } from 'pure-react-carousel';
import Button from '@material-ui/core/Button';

const CustomButtonFirst = React.forwardRef((props, ref) => <Button component={ButtonFirst} ref={ref} {...props} />);

// To handle the internal state of "ButtonFirst" like "disabled", this additional line is necessary.
export default withStore(CustomButtonFirst, state => ({ disabled: state.currentSlide === 0 }));

Source: https://github.com/express-labs/pure-react-carousel/issues/175

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

React Error: Unable to iterate over this.state.descriptions

Currently facing an issue while trying to resolve this error https://i.stack.imgur.com/BZ304.png The goal is to generate an automated form using the following function: let descriptionsForm = ( <form> {this.state.descriptions.map((d ...

javascriptreactjs

Check out the ViewUI Vue.js component that expands to reveal more content!

Is there a simple component to create the expand/collapse button with a blur effect like in all the demos? I see it used across different variations of the demos and am wondering if there is a specific component or demo showcasing how to achieve this effec ...

javascriptvue.js

Create a three-dimensional tree array in Typescript/Javascript by transforming a flat array

Received data is structured as follows: const worldMap = [ { "name": "Germany", "parentId": null, "type": "Country", "value": "country:unique:key:1234", "id&qu ...

javascriptarraysreactjstypescripttree

Cross-origin resource sharing (CORS) issue encountered while trying to play an mp

I am facing an issue with my React application where it is unable to play audio from a different source due to a CORS error. Example: Interestingly, when I visit https://www.w3schools.com/tags/tag_audio.asp, input the above URL and click play, it works fi ...

htmlreactjshtml5-audio

Is a webpage's sluggishness in Internet Explorer due to its lengthy page structure causing issues while loading quickly on other browsers?

My application has a page that is particularly long, around 8Mb of source HTML mainly comprised of tables. I am aware that this indicates poor architecture, but unfortunately, I am unable to make immediate changes due to certain constraints. In most brows ...

javascripthtmlinternet-explorerbrowser

Bug in React Big Calendar causing time to display incorrectly

I'm currently working on showcasing events using React-big-calendar. However, I've encountered an issue with the time format. The data structure I'm passing to the calendar for events looks like this: { end: Tue Nov 03 2020 21:42:16 GMT+ ...

reactjscalendarreact-big-calendardate-fns

Changing the font family for a single element in Next.js

One unique aspect of my project is its global font, however there is one element that randomly pulls font families from a hosted URL. For example: https://*****.com/file/fonts/Parnian.ttf My page operates as a client-side rendered application (CSR). So, ...

javascripttypescriptnext.js

Implementing an All-Routes-Except-One CanActivate guard in Angular2

In order to group routes within a module, I am aware that it can be done like this: canActivate: [AuthGuard], children: [ { path: '', children: [ { path: 'crises', component: ManageCrisesComponent }, ...

javascriptangulartypescript

Caution: The `id` property did not match. Server: "fc-dom-171" Client: "fc-dom-2" while utilizing FullCalendar in a Next.js environment

Issue Background In my current project, I am utilizing FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2, and Typescript v4.3.5. To set up a basic calendar based on the FullCalendar documentation, I created a component called Calendar. Inside this comp ...

reactjstypescriptnext.jsfullcalendar

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

A step-by-step guide on uploading a file to an AWS S3 bucket using a pre-signed URL in a Node

I am currently using S3 upload function in Node.js to upload files to an S3 bucket. The frontend of the application is built on Angular. However, my client now requires that all uploads be directed to the S3 bucket via a presigned URL. I am wondering if th ...

javascriptnode.jsamazon-web-servicesamazon-s3

Tips on modifying the content of a Material UI Card

I have a Material UI card displaying some details, along with an 'Edit' button. When the Edit button is clicked, I want to update the content of the card within the same layout. Below is the code snippet: <Card className={classes.root} variant ...

javascriptreactjsmaterial-ui

Manipulating Data in TypeScript: Creating a Mutated Copy of a List of Dictionaries

After going through multiple answers, it appears that there might be a logical error. However, I am struggling to find a solution for this issue. In TypeScript/JavaScript, I have two lists of dictionaries. One list is a copy of the other for tracking purp ...

javascriptarraystypescriptcloning

Guide on changing the content type of a Response header in a Next.js API route

I am currently working on a Next.js 14 app router and have a requirement to dynamically create an XML file when the API route is called and send it in response. Below is my code snippet: export async function GET(req: NextApiRequest, res: NextApiResponse) ...

reactjsnext.jsnext.js13

Incorporate images into ReactJS Components without the need to save them locally as files

<img src={BASENAME+"/src/images/cabecera_CE.jpg"} id="idImgCabecera" alt="Universidad Politécnica de Cartagena" class="img-responsive"/> and I am looking to do the following: import PHOTO from './../images/cabecera_CE.jpg' <img src= ...

reactjswebpack

The incredible power of the MongoDB $inc field

I am facing a challenge in writing a function that accepts a record id, an action (inc or dec), and a field name as a string to be incremented (can be 'likes', 'subs' or any other). The issue is that I am unable to find a way to replac ...

typescriptmongodb

Implementing dynamic display of div based on dropdown selection in typescript

A solution is needed to display or hide specific div elements based on a dropdown selection using Typescript. Sample HTML file: <select class="browser-default custom-select"> <option selected>single</option> <option value="1"> ...

htmlangulartypescript

Is there a way to include multiple values within a tag in ReactJs?

I need assistance with retrieving the value of each option tag in my Component that consists of select and option tags. How can I achieve this when onChange event occurs? Any suggestions would be greatly appreciated! const HandleChange = (e) => { ...

reactjs

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

Currently, I am working with two parent flex items, arranged with flex-direction: column. Within the first parent, there are two children. However, one of the children is optional and may be removed at times. I aim to have the optional child displayed on ...

javascripthtmlcssflexbox

How is the same-domain policy applied to popup windows that have JavaScript enabled in the URL?

Is it possible to achieve something similar to this? var w = window.open("javascript: makeAnAjaxRequest();"); I'm curious whether the Ajax request, which is triggered after the new window is opened, would be considered a cross-site request. Does the ...

javascriptajaxcross-domain