score:1
Accepted answer
makestyles
is legacy api that relies on jss, not emotion. it should not be used unless you are supporting older versions of mui.
the recommended way is to either use styled
or specify variants in the theme
object.
import { styled } from '@mui/material'
const socialmediaicon = styled(icon)(({ theme }) => ({
fontsize: 50,
margin: 10,
color: theme.palette.text.primary,
}))
<socialmediaicon component={twittericon} />
const theme = createtheme({
components: {
muiicon: {
variants: [
{
props: { variant: 'social' },
style: {
fontsize: 50,
margin: 10,
color: 'primary',
},
},
],
},
},
})
<icon variant="social" component={instagram} />
Source: stackoverflow.com
Related Query
- React & MUI: Unable to style MUI Icon with makeStyles
- I am using mdbreact npm for react data tables with next.js what i want to add fa fa icon with the heading but i am unable to do it
- How to test style for a React component attribute with Enzyme
- Ternary operator on style with React Js Es 6
- MUI - How can I style the scrollbar with CSS in JS?
- Apply style "cursor: pointer" to all React components with onClick function
- How to style child components in React with CSS Modules
- Closing React Semantic UI modal with button and close icon
- React Testing Library - Unable to find the element with data-testid
- MUI installation doesn't work with React 18
- Toggling Font Awesome 5 icon with React
- How to style button from MUI icon button
- Changing style property with setState in React
- Global Styles with React and MUI
- Use inline style in React with plain CSS string
- How to style nested elements in react with styled-components?
- Error: Unable to find an element with the text when I try a test with Jest in React
- How can I test React component's style with Jest + Enzyme?
- react native Unable to find an element with the testID
- Unable to display icon in React Bootstrap Tab instead of text
- React icon does not align with text
- react + Material ui makeStyles with '!important'
- Getting keyboard navigation to work with MUI Autocomplete and SimpleBar for react
- React router <NavLink> with active style doesn't work as I required with root URL
- React how to use icon inside Textfield Material-UI with TypeScript
- React Native Inline style for multiple Text in single Text With Touch effect
- Unable to track time spent on React web app with Google Analytics
- Unable to access JSON property with hyphen “-” in React Js(Babel)
- Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?
- React Intl v2 unable to use <FormattedDate> with date from SQL
More Query from same tag
- How to call react component in conditional statement inside another component
- React: how to reverse a table from an api call
- Using renderToNodeStream with react-helmet
- How to navigate into different component from nested route in React?
- How do I fetch api for my first weather app?
- React won't pass a particular value to "props"
- Checkbox is not selected after comparison with an array
- useState hook, setState function. Accessing previous state value
- How to achieve multi line area chart with Ant Design Charts?
- useState Hooks not working with enzyme mount()
- how can you set a dynamic list in react?
- How do I use constants within typescript type definitions?
- How to chain together Mutations in apollo client
- Typescript | Typescript is missing 27 Props, when extending formikProps on IProps
- Using Mocha to test file download using file-saver in a react project, gives "ReferenceError: HTMLAnchorElement is not defined" error
- Redux Thunk + ReactJS: Action creator being called but dispatch function not being called
- Material-UI Autocomplete & TextField triggers google autocomplete
- How to use Google maps api with webpack and typescript
- Why isn't the edit task function working for my function?
- Search filtering & dropdown filtering in reactjs
- how to show full image when resizing react
- How to include Material Icons in a MuiTheme property
- How to animate bounce and opacity change with css
- React component not working
- Form validation: output of error message
- Rect doesn't visualized after append
- ReactJS : Moderate severity vulnerabilities while running create react-app
- Google Tag Manager causes full page reload in SPA - React
- Accessing multiple easy-peasy stores from single component
- Syntax question in relation to updating state using setState in a for loop