Passing references between multiple components

I'm currently working on an application using Material-UI in conjunction with styled-components. I am faced with the challenge of passing a ref down to the root <button> node that is created by Material-UI. Material-UI provides a buttonRef prop for this purpose, which simplifies the process. However, I have customized MUI's Button component using styled-components as shown below:

const NavButtonMain = styled(Button)`
    ...
`

Moreover, my styling for the button heavily relies on dynamic CSS properties, making it impractical to use a regular CSS style sheet to access MUI's Button directly like so:

<Button buttonRef={ref} className={plain-old-css}/>

Styled-components offers an innerRef prop...

<NavButtonMain innerRef={ref}/>

...however, the challenge lies in transferring this ref one level deeper into the Button component itself. Any suggestions or ideas on how to achieve this?

cssreactjsmaterial-uistyled-componentsreact-ref

Answer №1

One method is to pass the prop called buttonRef to the NavButtonMain. You can then access and utilize it within the Button Component like so:

<NavButtonMain buttonRef={ref}/>

<Button buttonRef={this.props.buttonRef} className={plain-old-css}/>

Answer №2

If anyone is currently looking for the solution, the most recent documentation states that material-ui automatically forwards the ref attribute, so using this code snippet should suffice:

const mainRef = useRef();
...
return <Button ref={ref} {...props} />

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

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

javascripthtmlcss

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

I am looking to utilize React and Next.js to map my array from an object. The component is a function employing hooks

I am attempting to map an array within an object and encountering some challenges. The structure of the object is as follows: const data = {data: (6) [{…}, {…}, {…}, {…}, {…}, {…}], page: 2, per_page: 6, total: 12, total_pages: 2} I have been ...

javascriptreactjsuse-state

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

javascriptjquerycssdomjquery-wrap

Determine the last ListItem in a List using React and Material-UI

Utilizing material-ui alongside React has allowed me to create a dynamic listview with ease: <List> <Subheader>List Title</Subheader> <ListItem primaryText="Option One" /> <Divider /> <ListItem primaryText= ...

reactjsmaterial-ui

Having trouble with NextJs router 404 error when refreshing the page on Digital Ocean?

I am currently working with a NextJs project that has been exported as a static site and is being hosted on Digital Ocean's App platform. I am using next/router to handle routing within the application. One issue that I have encountered is when attem ...

reactjsroutesnext.jsdigital-ocean

The search for 'Autocomplete' in version ^4.11.2 within '@material-ui/core' did not yield any results

After clicking on the lab version link provided for Autocomplete at this repository, I expected to find it in the core with version 4.11.2. However, it seems that it is still not accessible. ...

material-ui

What is the method to activate a function whenever a particular state is

I'm searching for a solution to associate a specific function with a change in a particular state. Here is the code I have written: export type MoviesAppState = { search: string; searchBy:string; startDate: number; endDate: number; } ...

reactjsstate

What could be the reason for the failure of .simulate("mouseover") in a Jest / Enzyme test?

I have a scenario where a material-ui ListItem triggers the display of a material-ui Popper containing another ListItem on mouse over using the onMouseOver event. While this functionality works as expected, I am facing difficulties replicating the behavior ...

javascriptjestjsmaterial-uidom-eventsenzyme

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

Utilizing the repeater field in Wordpress' advanced custom fields, I have made the content on my site dynamic. View an image of the static markup here The following is how I structured the content using plain HTML: <div class="container" ...

phphtmlcsswordpressadvanced-custom-fields

Unable to customize the OK/Cancel buttons on material-ui Date Picker

After following the instructions provided in this resource to modify the background color of material-ui's Date Picker dialog by adjusting the theme, I encountered an issue. Although changing the theme successfully altered the background color, it did ...

datepickerstylesmaterial-ui

In ReactJs, what is the best way to load a new component when a button is clicked?

In ReactJs, I have developed a main component known as MainPage using Material-UI. import React from 'react'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import CssBaseline from & ...

javascriptreactjsmaterial-ui

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...

javascriptjqueryhtmlcss

While in the process of developing a React application, I have encountered the following challenge

PS F:\Programming Tutorials Videos\R Practice> npx create-react-app custom-hook npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! errno ENOTFOUND npm ERR! network request to https://registry.npmjs.org/create-react-app failed, reaso ...

javascriptnode.jsreactjsnpmnpx

Implementing Typescript with React: Assigning event.target.name to state

I am facing an issue with a React state that has specific named keys defined in an interface... Despite trying a potential solution based on the state keys, I am still encountering an error... { [x: string]: string; }' provides no match for the sign ...

reactjstypescript

I am interested in incorporating the ability to select and scroll the window without needing to interact with the scroll bar by

Imagine a visitor wanting to highlight all the information on a webpage. They choose to start dragging their cursor towards the bottom of the window. How can we enable the webpage to smoothly scroll down as they do this? ...

javascriptreactjs

What is the process for importing a jquery plugin like turnjs into a React component?

After searching through countless posts on stackoverflow, it seems like there is no solution to my problem yet. So... I would like to integrate the following: into my react COMPONENT. -I attempted using the script tag in the html file, but react does no ...

javascriptjqueryreactjs

Is there a way to activate the onClick event in Reactjs within the render method rather than the

Is it possible to assign an onClick function when performing a conditional render outside of the React return statement? I tried adding code on Stackoverflow but couldn't get any syntax help or eslint after spending an hour in their editor. :D sec ...

reactjsonclick

Sending a sound recording to the express js server with the help of multer

I'm currently working on a project where I need to record audio and save it in my local directory (uploads folder) using express js and multer. The recording part is working fine with mic-recorder-to-mp3, but I'm facing an issue with saving the r ...

javascriptnode.jsreactjsexpressmulter

Overriding Styles Set by an External CSS file

Let's assume that I have two different style sheets set up on my webpage: site.css: .modal { position: absolute; width: 200px; ... } ... reset.css: .reset * { position: static; width: auto; ... } Unfortunately, I don ...

javascriptjquerycss