Question 410147 in React native Question posted in
The official React Native documentation can be found here.

React native – Why are Tailwind CSS classes not working with Material UI <Button>?

I’m attempting to make a circular button with a Material UI icon, but my various efforts have failed to produce the desired shape. I am creating a React.js component for my project.

Version Detail :

node – 20.16.0

"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.1.2",
"@mui/material": "^6.1.2",
"@mui/styled-engine-sc": "^6.1.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-native-linear-gradient": "^2.8.3",
"react-router-dom": "^6.26.2",
"styled-components": "^6.1.13"
},
"devDependencies": {
"@eslint/js": "^9.11.1",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.2",
"autoprefixer": "^10.4.20",
"eslint": "^9.11.1",
"eslint-plugin-react": "^7.37.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12",
"globals": "^15.9.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13",
"vite": "^5.4.8"
}

Here are different approach I tried:

import Button from '@mui/material/Button';
import MenuOpenIcon from '@mui/icons-material/MenuOpen';


/*----- Approach 1 ---------*/

<Button className='w-10 h-10 rounded-full'><MenuOpenIcon/></Button>


/*----- Approach 2 ---------*/

<Button
  sx={{
    width: '2.5rem',
    height: '2.5rem',  
    borderRadius: '9999px',
  }}
>
  <MenuOpenIcon />
</Button>


/*------ Approach 3 -------*/

import { styled } from '@mui/system';

import Button from '@mui/material/Button';

const StyledButton = styled(Button)`@apply w-10 h-10 rounded-full;`;


<StyledButton><MenuOpenIcon /></StyledButton>
Tags:

2

Answers


  1. 0

    Checkout the MUI documentation when working with Tailwind CSS and MUI.

    Documentation

    If you want to work with Tailwind CSS, you can set the precedence of more by setting the important option as true in tailwind.config.js

    module.exports = {
  important: true,
}

    But it is not a good practice to work with more than one CSS framework.

    Login or Signup to reply.
  2. 0 
    <Button className='w-10 h-10 rounded-full'><MenuOpenIcon/></Button>

    update your code with min with class as follows

    <Button className='w-10 h-10 rounded-full min-w-10'><MenuOpenIcon/></Button>

    to get perfect circle around your button, also you can increase or decrease size of icons by using font size class as follows

    <Button className='w-10 h-10 rounded-full min-w-10'><MenuOpenIcon fontSize='medium'/></Button>

    hope it will resolve your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search