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:

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

Create a custom hook that encapsulates the useQuery function from tRPC and provides accurate TypeScript typings

I have integrated tRPC into a project that already has API calls, and I am looking to create a separate wrapper for the useQuery function. However, I am facing challenges in getting the TypeScript types right for this customization. My Objective This is w ...

javascriptreactjstypescriptnext.jstrpc.io

Is there an easy method to compare the CSS styles of a specific section in HTML?

Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...

asp.nethtmlcssdomstylesheet

Alignment issues with Navigation Elements

Recently, while working with the Bulma CSS framework, I encountered an interesting challenge. I wanted to align the navigation buttons to the bottom of the red field, but they appeared to be shifted out of alignment. Despite trying to apply inline CSS styl ...

htmlcsssassbulma

Is there a way to halt the polling process for the specific API handling the background task?

I have been using this polling function for executing background tasks. export const poll = ({ fn = () => {}, validate = (result) => !!result, interval = 1000, maxAttempts = 15, }) => { let attempts = 1; // eslint-disable-next-line con ...

javascriptreactjs

Tips for enhancing the contents of a single card within a react-bootstrap accordion

Currently, I am facing an issue with my columns expanding all cards at once when utilizing react-bootstrap accordion. My goal is to have each card expand individually upon clicking on its respective link. However, I am encountering difficulties in implem ...

javascriptreactjsaccordionreact-bootstrap

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Tips for updating a value in a React TextField using handleChange function

After clicking a button, I need to dynamically set a value in this textfield: <TextField fullWidth inputProps={{ maxLength: 75 }} key="nomeSocial" id="outlined-basic" label="Nome Social" name="nomeSocial&qu ...

javascriptreactjsmaterial-uiuitextfieldreact-hook-form

Updating a Parent component from a Child component in React (Functional Components)

My functional component RoomManagement initiates the fetchRooms function on the first render, setting state variables with data from a database. I then pass setLoading and fetchRooms to a child component called RoomManagementModal. The issue arises when t ...

javascriptreactjsreact-functional-component

What could be causing the 401 Unauthorized error to occur when attempting to request API data from React?

In my current project, I am in the process of developing a server-rendered application using Express and React. I have encountered an issue while trying to query data from the back-end on the client side. The workflow is as follows: Users navigate to a s ...

reactjsexpressserver-side-rendering

Electron fails to display images in the compiled version

I'm currently troubleshooting an issue related to displaying images using CSS in my electron project. In the latest version of the application, the images are not showing up when linked from a CSS file. However, in a previous version, the images disp ...

javascripthtmlcsselectron

I have successfully executed Gatsby Graphql queries using GraphiQL, but unfortunately, the same queries do not work on NextJS (where GraphQL queries are configured with Apollo)

Just to verify, both NextJS and Gatsby are connected to a Strapi api that supports GraphQL, with the server running on http://localhost:1337 In addition, I can access the GraphQL playground through http://localhost:1337/graphql However, Gatsby allows me t ...

reactjsgraphqlnext.jsgraphiql

Align the ion content (or text or label) to the center vertically

I am striving to achieve a similar look as shown in the following images: However, I am currently at this stage: Please note that the first image showcases a bootstrap form, while the second image displays my design using ionic. Although I prefer not to ...

htmlcssangularionic-frameworkionic4

Using drawer navigation to pass data/parameters in React Navigation 5

I am facing an issue with passing parameters between two screen components that belong to different navigators. First, I have the Login component inside a Stack navigator, and then I have the Home component inside a Drawer navigator. The hierarchy is as f ...

reactjsreact-nativereact-navigation

Enhance your menu items with React Material-UI styling for an active and

I am currently exploring ways to style the :active and :hover states of a Material-UI Menu using CSS. According to the documentation, selectedMenuItemStyle | object | | Override the inline-styles of selected menu items. However, when I attempt to appl ...

reactjsmaterial-ui

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

javascripthtmlcssslider

Utilize React's capability to pass multiple parameters to event handlers

Trying to implement React using ES6 syntax has been quite a challenge. Previously, in ES5 I used setInitialState without a constructor along with function binding to make things work seamlessly. The goal now is to update the state when an input element is ...

reactjstwitter-bootstrap-3

I'm curious about the process by which custom hooks retrieve data and the detailed pathway that custom hooks follow

//using Input HOOK I am curious to understand how this custom hook operates. import { useState } from "react"; export default initialValue => { const [value, setValue] = useState(initialValue); return { value, onChange: event =&g ...

javascriptreactjsmaterial-uireact-custom-hooks

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

javascriptjqueryhtmlcss

Exploring LZMA compression in conjunction with next.js

Is anyone familiar with using the lzma algorithm to compress video, photo, text, etc. in the Next.js framework? I have searched everywhere but couldn't find a solution. I haven't found a proper demonstration or answer anywhere. I would greatly a ...

javascriptreactjsnext.jscompressionlzma

Changing the information of objects stored in arrays using React Three Fiber

My challenge is with an array of roundedBox geometry shapes called myShape. I am trying to figure out if it's possible to change the position of one of the shapes within the array without creating a new shape altogether. Ideally, I would like to updat ...

javascriptreactjsthree.js