Materriel-UI ToggleButton has the appearance of a traditional button

Looking to style a ToggleButton like a button? Having trouble with an error in the console when nesting a button inside? Check out this solution:


  const StyledToggleButtonGroup = withStyles((theme) => ({
    grouped: {
      margin: theme.spacing(0.5),
      border: 'none',
    },
  }))(ToggleButtonGroup);

 <StyledToggleButtonGroup size="medium" value={problem} exclusive onChange={handleChange}>
          <ToggleButton color="red" value="technical" className={helpClasses.boxButton}>
            <Button size="medium" fullWidth color="primary" variant="outlined">
              {t('help.technical')}
            </Button>
          </ToggleButton>
        </StyledToggleButtonGroup>
        <DialogActions>

If you're encountering an error in the console, such as 

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>
, here's a workaround.

Here's how you can achieve the desired look: https://i.sstatic.net/ezPOr.png

cssreactjsmaterial-ui

Answer №1

According to the information provided in the documentation at https://material-ui.com/components/toggle-button/

The documentation states that you can insert icons into the ToggleButton, or essentially anything other than a Button.

It is recommended to follow the guidelines outlined in the documentation,

<ToggleButtonGroup
      value={alignment}
      exclusive
      onChange={handleAlignment}
      aria-label="text alignment"
    >
      <ToggleButton value="left" aria-label="left aligned">
        <FormatAlignLeftIcon />
      </ToggleButton>
      <ToggleButton value="center" aria-label="centered">
        <FormatAlignCenterIcon />
      </ToggleButton>
      <ToggleButton value="right" aria-label="right aligned">
        <FormatAlignRightIcon />
      </ToggleButton>
      <ToggleButton value="justify" aria-label="justified" disabled>
        <FormatAlignJustifyIcon />
      </ToggleButton>
    </ToggleButtonGroup>

Answer №2

I successfully achieved it

const styles = makeStyles((theme) => ({
  toggleBtn: {
    borderRadius: '5px',
    borderStyle: 'solid',
    borderWidth: 1,
    width: '6vw',
    height: '6vw',
  },
  textBtn: {
    color: colors.light.background,
    fontWeight: 400,
    fontSize: fontSizes.large,
  },
}));

<ToggleButton value="Incorrect identification ">
  <Grid
    container
    justify="center"
    alignItems="center"
    item
    className={styles.toggleBtn}
  >
    <Typography className={styles.textBtn}>
      {"incorrectIdentification"}
    </Typography>
  </Grid>
</ToggleButton>;

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

Assorted dimensions of square grid

Is it feasible to achieve the following using only HTML and CSS? The condition is that since the divs are automatically generated in a list, they should not be nested within another HTML element (such as adding a div for each line is restricted): Here is ...

htmlcss

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

htmlcss

Steps for creating new users using a post request

I've been working on developing a chat application using react-chat-engine, and everything is running smoothly except for one issue - I'm struggling to figure out how to send a post request to create new users. Below is the code snippet I'v ...

javascriptreactjsreact-chat-engine

Issues encountered while developing a ReactJS application using TypeScript

While attempting to create a React app using the command npx create-react-app client-app --use-npm --typescript, I expected to generate a project with TypeScript files, but instead ended up with index.js and app.js rather than index.tsx and app.tsx. Could ...

reactjstypescriptvisual-studio-codenpx

The Jquery animate function is not compatible with the transform property

I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

javascripthtmljquerycssjquery-animate

Tips for achieving a static background image while allowing scrolling on a webpage in asp.net

I am struggling to implement this on my website. The background image needs to be fixed while the content of the webpage should scroll in asp.net <head runat="server"> <title></title> <style type="text/css"> body { backgr ...

asp.nethtmlcssweb

Troubleshooting React's failure to start with node.js running behind an Nginx Reverse Proxy

This is my first attempt at setting up a Node.js server in production (other than one Meteor server), and I've run into a problem that I can't figure out on my own. I have built an application using React. Here is the server code: // Imports va ...

javascriptnode.jsreactjsnginx

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

jqueryhtmlcsstwitter-bootstrap

Ways to conceal a component in React

In my code, I have an App component and a Component2. import Component2 from './Component2'; class App extends Component { state={data: ""} changeState = () => { this.setState({ data: "state/props of parent component ...

reactjs

The React error message refuses to disappear even after attempting to refresh the page

Currently, I am immersed in a React project where I have encountered an issue on the Register Page. All errors are being added to a Message component. Interestingly, even after encountering a React error (such as 'Cannot read properties of undefined&a ...

javascriptreactjsmessage

Unable to convert the value "undefined" to an ObjectId (type string) in the "_id" path for the "Order" model

As someone who is new to Javascript and working on an e-commerce website, I am currently facing a challenge with displaying the order id on the return page. Each time I try to do so, I encounter an error message that reads Cast to ObjectId failed for val ...

javascriptnode.jsreactjs

What is the best way to center a div within another div without using the margin tag?

I am struggling to find a way to center a container (div) on my webpage. I've tried various methods like using margin:auto, margin:0 auto;, margin-left:auto;, and margin-right:auto;, but none of them seem to work. Additionally, I'm unsure about ...

asp.netcss

Add value to input only if there is data available using a React functional component

Featuring an input field as part of a questionnaire with next and back buttons: <input id="answer"/> Capturing the user's input value when they click on the next or back buttons: const [quizIndex, setIndex] = useState(0) const [answe ...

reactjsreact-hooks

A CSS rule to display a nested list on the left-hand side

I created a menu that you can view here. When hovering over "tanfa demo example," the sublist appears on the right side. The issue I'm facing is that my menu is positioned all the way to the right, which means the sublist also appears on the extreme ...

javascriptjquerycssdrop-down-menu

Multiple React state changes occurring with a single setState method invocation

I have developed a component that updates the state whenever a socket message is received. Here is an overview of how it works: SocketComponent.js import React, { useEffect, useState } from 'react'; import ExampleComponent from './ExampleCo ...

reactjssocket.ioreact-hooks

Show small information box when hovering over custom toggle button

I have developed a unique custom toggle switch feature When I hover my mouse over the switch, it should display a tooltip message as YES if the switch is in the ON position and NO if it's in the OFF position. Is there a way to implement this functio ...

htmljquerycss

Incorporating SVG graphics within a SharePoint web part

I am in the process of developing a webpart for SharePoint using the SharePoint Framework, TypeScript, and ReactJS. I have encountered an issue while trying to incorporate an svg image into my webpart code, resulting in build errors. Initially, I used the ...

reactjstypescriptsvgsharepointsharepoint-online

Similar Functionality to jQuery's .load() in REACT

I'm currently diving into the world of React, attempting to transition a PHP + jQuery Page to React (minus the jQuery). However, given the intricate complexity of the page, I won't be able to migrate everything at once. As a result, I need to sta ...

javascriptjqueryreactjs

Open the overflow div within a table data cell

My goal is to create a drag-and-drop schedule tool similar to Fullcalendar. I have decided to use a table layout with a rectangular div inside each TD cell to represent tasks. <table onDragEnd={dragend}> <tr> <th>0</th> ...

javascripthtmlcssreactjs

Tips for creating a perfectly positioned v-overlay within a v-col component

When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...

cssvue.jscss-positionvuetify.js