Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
626 views
in Technique[技术] by (71.8m points)

reactjs - Passing props to material UI style

given card code as in here : card

how can I update the card style or any material UI style as from

    const styles = theme => ({
    card: {
    minWidth: 275,
  },

to such follows:

    const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

when I tried the latest one, I got

 Line 15:  'props' is not defined  no-undef

when I updated code to be :

const styles = theme =>  (props) => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

also

 const styles  = (theme ,props) => ({
        card: {
        minWidth: 275, backgroundColor: props.color  },

instead of

const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

I got the component card style at the web page messy.

By the way, I pass props as follows:

<SimpleCard backgroundColor="#f5f2ff" />

please help!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Deleted the old answer, because it's no reason for existence.

Here's what you want:

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={`${firstStyle} ${secondStyle}`}>
            {children}
        </div>
    )
}

export default MyComponent;

Now you can use it like:

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>

Official Documentation


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...