score:0
you need to use makestyles in material ui and you can not use style or classes there :
import * as react from "react";
import { makestyles } from "@material-ui/core/styles";
const usestyles = makestyles(() => ({
mybackground: {
backgroundcolor: "yellow"
},
myborder: {
border: "2px solid green"
},
myfont: {
color: "red"
}
}));
export default function index() {
const styles = usestyles();
return (
<div classname={`${styles.myfont} ${styles.mybackground}`} maxwidth="sm">
this is a test
</div>
);
}
it works for me very well.
score:1
according to the documentation, makestyles is deprecated and sx is the intended api for design. what about in cases where you need to use an html element? i am writing a component that requires "object" for displaying pdfs. so, how would i style this element?
import { box } from '@mui/material'
export default function index() {
return (
<box sx={{
'& object': {
backgroundcolor: "red",
border: "2px solid green",
color: "blue",
maxwidth: 'md',
}}}
>
<object/>
</box>
);
}
in this way, we can indirectly style any html element when needed. since the "box" component does not introduce any formatting of it's own, that would be the recommended way to implement this technique.
more can be found on this technique: https://mui.com/system/the-sx-prop/#array-values.
score:4
sx
only works with mui component, not html element. so you need to replace div
. you can use box
instead.
<box sx={styles.mybackground}>
this is a test
</box>
for html element, use the style
attribute, which for your case it's working correctly. for more https://mui.com/system/the-sx-prop/.
Source: stackoverflow.com
Related Query
- MUI 5 className and SX prop show [object] instead of CSS class
- What's the difference between class and className with respect to css inheritance?
- What is the different between classes prop in mui and className prop when you insert style in to them?
- Differences between require() and passing an object via prop or context
- using css modules in react how can I pass a className as a prop to a component
- Dealing with stylesheet order and css module className overrides
- babel 7 Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead
- WebStorm - autocomplete React className attribute with quotes instead of object literals
- react pass a class object as prop
- Difference between the `className` prop and the new MUI system utility `sx` prop?
- Material UI Multi-Select different code value and visible value - show keys instead values
- React Mix ClassName class and props
- react, css) transition css for fade in and out, when background image is changed with className
- CSS how to only show 1 row and hide the others?
- pass ref to a class component with React.cloneElement and render prop
- Using the MUI DatePicker with yup and react-hook-form - the error prop doesn't work as intended
- How to find object in array and show it in React component?
- Using external styles and multiple class names with webpack css loader
- How do I create css class in createMuiTheme() and use them directly without having to get its value from component "classes" props?
- webpack and react recognise css class names
- Emotion: Using both a class and the "css" method in "className" prop
- Requests for JS and CSS giving index.html instead
- How can I toggle a class and change the CSS in Nextjs?
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- Any more or less official way to use class instead of className attribute in React
- Rollup and Post CSS - Auto-prefixing React className attributes
- Date object passed as prop becomes [object Object] instead of [object Date]
- i try to push a value inside an object and its always show undefined everytime i switch to another input tag
- How to make the pass a dynamic value to css class and cusmize in material UI in react
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
More Query from same tag
- Typescript inference issue
- React after Delete I get "Unhandled Rejection (TypeError): this.state.products.filter is not a function"
- How to style mui-rte CodeBlock
- React todo list. addItem function not working
- Making an AJAX call in React after a button is pressed?
- Async useEffect does not execute entire body when dependency changes
- aws-amplify not preserving session after successfull signin
- I want to access my state object after the setState Initializes which state system should i use
- Error coming when using the state value in react using typescript
- How to return multiple components for each element in a array using map()?
- React, Use navbar layout for every page with the exception of homepage
- Manual mock implementation of a nested React component with jest & enzyme
- JS: Failed to execute 'getComputedStyle' on 'Window': parameter is not of type 'Element' in making responsive careusol
- Getting issue with heremap multiple pickup and multiple drop api
- Firestore onSnaphot returning duplicate data
- Fail creating a SubMenu in a component with antd
- ReactJS: why does my react main app component renders many times when it is triggered by keyboard key instead of a mouseclick?
- how does this fix the state closure problem with react hooks?
- In Redux, reducer doesn't recognise the action object
- what is the correct way to add data array to the array state as well
- React/Axios - Display part of URL
- How to map a JSON array to a List in ReactJS?
- Clone and run react native projects from GitHub
- React state return array object
- Is there tag styling in react js inline style
- React.useContext appearing as undefined
- React escaping vars inside an element
- Set a value for every item except the item passed Immutable JS
- How to detect a variable change in React js/Solidity?
- TypeError: Cannot read properties of undefined (reading 'map') React JS