CODEWITHSUNDEEP
reactjsmaterial-ui
JayJayAbrams
JayJayAbrams

Reputation: 195

Getting contents from useStyles()

Whilte creating different props with useStyles() they can be accessed in elemens like

const useStyles = makeStyles((theme) => ({
    title: {
        margin: theme.spacing(4, 0, 2)
    }
)

return (
    <Typography className={classes.title}>text</Typography>
)

However if I try to log the contents it returns me a string makeStyles-title-7

function App() {
    const classes = useStyles()
    console.log(classes.title)

How to access the contents stored within? How to log them properly?

Upvotes: 0

Views: 293

Answers (1)

Varun Goel
Varun Goel

Reputation: 475

Material-ui uses CSS-in-JS solution to write component styles.This helps to achieve modularity and describe styles in a declarative, conflict-free and reusable way.

The class names are generated automatiaclly such that they are unique in nature and do not conflicts with global CSS names.Thats why when you do 

console.log(classes.title)

it prints values like makeStyles-title-7

Styles definition will be injected at runtime in <head> element.(You can change this behaviour as well)

enter image description here

You can learn more about JSS and various configurable options from here - https://cssinjs.org/react-jss/?v=v10.1.1

Upvotes: 1

Related Questions