Material-ui: स्टाइल्स ऑब्जेक्ट के लिए प्रॉप्स पास कर सकते हैं?

हमें संभवतः उसी संदर्भ कुंजी का उपयोग करके सामग्री-यूआई बनाकर समस्या का समाधान करने में सक्षम होना चाहिए जैसे कि प्रतिक्रिया-जेएसएस: https://github.com/cssinjs/theming/blob/master/src/channel.js#L1।
इसके अलावा, #7633 . पर एक नज़र डालें

मेरे पास प्रतिक्रिया-जेएसएस इंटरऑपरेबिलिटी उदाहरण के साथ एक पीआर तैयार है। मैं इसे दस्तावेज़ों में जोड़ दूंगा। सीसी @ कोफ

@oliviertassinari इसका मतलब यह है कि शैलियों की परिभाषा के भीतर सहारा तक पहुंच प्राप्त करना अब संभव होना चाहिए? यह मुझे स्पष्ट नहीं है कि कैसे...

@pelotom नहीं, स्टाइल के पास गुणों तक पहुंच नहीं है। लेकिन यह देखते हुए कि लोग इस फीचर की कितनी मांग कर रहे हैं। बग फिक्स के बाद, यह कुछ ऐसा है जिसे मैं प्राथमिकता दे सकता हूं। आप injectSheet HOC का उपयोग कर सकते हैं, लेकिन यह कई मुद्दों के लिए द्वार खोलता है: मेमोरी लीक, हॉट रीलोडिंग टूटा हुआ, कोई classes संरचना नहीं, कोई आंतरिक रेफरी एक्सेस नहीं, टूटी हुई थीम नेस्टिंग हैंडलिंग। कम से कम, यह कुछ ऐसे मुद्दे हैं जिनका मैं अतीत में सामना कर रहा हूं और इसने मेरे पुनर्लेखन को प्रेरित किया। मुझे लगता है कि कदम दर कदम उन मुद्दों को संबोधित किया जाएगा।

@oliviertassinari यह सुनकर बहुत सुकून मिलता है कि आप इसे प्राथमिकता देने पर विचार करेंगे! इससे घटकों को अनुकूलित करना बहुत आसान हो जाएगा। उदाहरण के लिए, मैं एक विन्यास योग्य आकार (यानी पिक्सेल में चौड़ाई और ऊंचाई) के साथ एक चेकबॉक्स रखना चाहता हूं:

<CustomCheckbox size={16} />

अगर हम props में styles , तो यह बहुत आसान होगा:

const styles = {
  root: {
    width: props => props.size,
    height: props => props.size
  }
}

या

const styles = props => ({
  root: {
    width: props.size,
    height: props.size
  }
})

और फिर:

const CustomCheckbox = ({size, classes}) => <Checkbox className={classes.root} />;

export default withStyles(styles)(CustomCheckbox);

अभी के लिए, क्या आपके पास इस बारे में कोई सुझाव है कि हमें इस प्रकार के उपयोग के मामलों से कैसे संपर्क करना चाहिए? या क्या आपके पास कोई अनुमान है कि आप स्टाइल के साथ का उपयोग करते समय प्रॉप्स तक पहुंचने के लिए समर्थन जोड़ने में सक्षम हो सकते हैं?

@nmchaves आप केस का उपयोग इनलाइन-शैली दृष्टिकोण के लिए पूरी तरह से गिरने लगते हैं, आप इसके बारे में दस्तावेज़ीकरण में कुछ पा सकते हैं। सामान्य प्रश्न
https://github.com/callemall/material-ui/blob/75a30061e76eae93c711ec202a2c7e4238a4f19a/docs/src/pages/style/SvgIcons.js#L38 -L44

धन्यवाद @oliviertassinari ! मैं उम्मीद कर रहा था कि मैं इसे withStyles का उपयोग करके पूरा कर सकता हूं, लेकिन इनलाइन-शैलियां बहुत अच्छा काम करेंगी। और यह तथ्य कि आप यहां + डॉक्स में इसकी अनुशंसा कर रहे हैं, मुझे इस निर्णय से बहुत आश्वस्त महसूस कराता है। एक बार फिर धन्यवाद!

पृष्ठभूमि के लिए शैली में एक प्रोप (छवि स्रोत) पास करने में सक्षम होना अच्छा होगा छवि

मैं withStyle

const withStylesProps = styles =>
  Component =>
    props => {
      console.log(props);
      const Comp = withStyles(styles(props))(Component);
      // return <div>lol</div>;
      return <Comp {...props} />;
    };

const styles = props => ({
  foo: {
    height: `${props.y || 50}px`,
  }
});

export default withStylesProps(styles)(
  props => (
    <div className={props.classes.foo} style={{ ...props.style, background: 'yellow' }}>
      <h1>Hello!</h1>
    </div>
  )
);

डेमो: https://codesandbox.io/s/k2y01rj3w7

(मुझे आश्चर्य है ^ बिना किसी ThemeProvider और JssProvider सेट अप https://codesandbox.io/s/q6v7krx6 के बिना काम करता है, आह यह इसे प्रारंभ करता है)

@caub यह काम कर रहा है, लेकिन आपको इस पैटर्न से सावधान रहने की जरूरत है। इंजेक्ट किया गया CSS घटक के उदाहरणों की संख्या के साथ बढ़ेगा। यह #7633 का डुप्लिकेट है। मैंने इस विषय में खुदाई नहीं की है। लेकिन मेरा मानना ​​​​है कि @kof संस्करण कुछ प्रदर्शन अनुकूलन का उपयोग करता है।

@caub साझा करने के लिए धन्यवाद!

@oliviertassinari यह https://github.com/cssinjs/react-jss/blob/master/readme.md#dynamic -values ​​in React-jss है, मुझे आश्चर्य है कि इसका उपयोग सामग्री-यूआई में क्यों नहीं किया जा सका? इसके अलावा, मैं आपकी बात को समझता हूं जहां आप कहते हैं कि इनलाइन style प्रोप गतिशील मूल्यों के लिए एकदम सही है, लेकिन सभी शैलियों की परिभाषा एक ही स्थान पर होना अच्छा है। https://github.com/airbnb/react-with-styles भी है जो अधिक कुशल गतिशील शैलियों के लिए className और style को संभालेगा

मुझे एक ही समस्या का सामना करना पड़ रहा है क्या कोई मेरी मदद कर सकता है?
'प्रतिक्रिया' से आयात प्रतिक्रिया;
'प्रोप-प्रकार' से प्रोपटाइप आयात करें;
'material-ui/styles' से {withStyles} आयात करें;
'सामग्री-यूआई/दराज' से आयात दराज;
'Material-ui/AppBar' से AppBar आयात करें;
'सामग्री-यूआई/टूलबार' से टूलबार आयात करें;
'सामग्री-यूआई/सूची' से आयात सूची;
'सामग्री-यूआई/टाइपोग्राफी' से टाइपोग्राफी आयात करें;
'Material-ui/IconButton' से IconButton आयात करें;
'सामग्री-यूआई/हिडन' से छुपा आयात करें;
'मटेरियल-यूआई/डिवाइडर' से इंपोर्ट डिवाइडर;
'Material-ui-icons/Menu' से MenuIcon आयात करें;
आयात {mailFolderListItems, OtherMailFolderListItems} './tileData' से;

कास्ट ड्रावरविड्थ = २४०;

कॉन्स्ट स्टाइल = थीम => ({
जड़: {
चौड़ाई: '100%',
ऊंचाई: 430,
मार्जिनटॉप: थीम.स्पेसिंग.यूनिट * 3,
जेडइंडेक्स: 1,
ओवर फलो हिडेन',
},
ऐपफ्रेम: {
स्थिति: 'रिश्तेदार',
प्रदर्शन: 'फ्लेक्स',
चौड़ाई: '100%',
ऊंचाई: '100%',
},
ऐपबार: {
स्थिति: 'पूर्ण',
मार्जिन लेफ्ट: ड्रावरविड्थ,
[थीम.ब्रेकप्वाइंट.अप ('एमडी')]: {
चौड़ाई: calc(100% - ${drawerWidth}px) ,
},
},
navIconHide: {
[थीम.ब्रेकप्वाइंट.अप ('एमडी')]: {
कुछ भी डिस्प्ले मत करो',
},
},
ड्रावरहैडर: थीम.मिक्सिन्स.टूलबार,
दराज पेपर: {
चौड़ाई: २५०,
[थीम.ब्रेकप्वाइंट.अप ('एमडी')]: {
चौड़ाई: दराजविड्थ,
स्थिति: 'रिश्तेदार',
ऊंचाई: '100%',
},
},
विषय: {
बैकग्राउंड कलर: थीम.पैलेट.बैकग्राउंड.डिफॉल्ट,
चौड़ाई: '100%',
पैडिंग: थीम.स्पेसिंग.यूनिट * 3,
ऊंचाई: 'कैल्क(100% - 56px)',
मार्जिन टॉप: 56,
[थीम.ब्रेकप्वाइंट.अप ('एसएम')]: {
ऊंचाई: 'कैल्क(100% - 64px)',
मार्जिन टॉप: 64,
},
},
});

निर्यात वर्ग ResponsiveDrawer React.Component का विस्तार करता है {
राज्य = {
मोबाइल ओपन: झूठा,
};

हैंडलड्रावर टॉगल = () => {
this.setState({mobileOpen: !this.state.mobileOpen});
};

प्रस्तुत करना() {
const {कक्षाएं, विषय} = this.props;

const drawer = (
  <div>
    <div className={classes.drawerHeader} />
    <Divider />
    <List>{mailFolderListItems}</List>
    <Divider />
    <List>{otherMailFolderListItems}</List>
  </div>
);

return (
  <div className={classes.root}>
    <div className={classes.appFrame}>
      <AppBar className={classes.appBar}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={this.handleDrawerToggle}
            className={classes.navIconHide}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" noWrap>
            Responsive drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Hidden mdUp>
        <Drawer
          variant="temporary"
          anchor={theme.direction === 'rtl' ? 'right' : 'left'}
          open={this.state.mobileOpen}
          classes={{
            paper: classes.drawerPaper,
          }}
          onClose={this.handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <Hidden smDown implementation="css">
        <Drawer
          variant="permanent"
          open
          classes={{
            paper: classes.drawerPaper,
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <main className={classes.content}>
        <Typography noWrap>{'You think water moves fast? You should see ice.'}</Typography>
      </main>
    </div>
  </div>
);

}
}

ResponsiveDrawer.propTypes = {
कक्षाएं: PropTypes.object.isRequired,
विषय: PropTypes.object.isRequired,
};

स्टाइल्स (शैलियों) (उत्तरदायी ड्रावर) के साथ डिफ़ॉल्ट निर्यात करें;
`

इंजेक्ट किया गया CSS घटक के उदाहरणों की संख्या के साथ बढ़ेगा।

@oliviertassinari इंजेक्शन सीएसएस + बढ़ेगा - उसी तरह एचटीएमएल इनलाइन शैलियों के साथ बढ़ेगा। स्थिर शैलियों को अलग-अलग शीट में प्रस्तुत किया जाता है और सभी घटक उदाहरणों में पुन: उपयोग किया जाता है।

मुझे यह पसंद आया, हालांकि स्टेटलेस घटक के साथ यह withStyle को render से render फिर से प्रस्तुत करेगा, हम पूर्ण शुद्ध घटक का उपयोग करके बच सकते हैं।

import React from 'react';
import {
  withStyles,
  Grid,
  CircularProgress
} from 'material-ui';

const PreloadComponent = props => {
  const { classes,size } = props;
  return (
    <Grid className={classes.container} container justify={'center'} alignItems={'center'}>
      <CircularProgress size={size}/>
    </Grid>
  )
};

const StyleWithThemeProps = (props) => {
  return withStyles(theme => ({
    container: {
      paddingTop: props.size*2 || 50,
      paddingBottom: props.size*2 || 50,
    }
  }),{withTheme: true})(PreloadComponent)
};

const Preload = props => {
  const { size } = props;
  const WithStylesPreloadComponent = StyleWithThemeProps(props);
  return (
    <WithStylesPreloadComponent {...props}/>
  )
};

Preload.defaultProps = {
  size: 20
};

export default Preload;

हम अद्यतन करने से बचने के लिए पूर्ण शुद्ध घटक का उपयोग कर सकते हैं

const PreloadComponent = props => {
  const { classes,size } = props;
  return (
    <Grid className={classes.container} container justify={'center'} alignItems={'center'}>
      <CircularProgress size={size}/>
    </Grid>
  )
};

const StyleWithThemeProps = (props) => {
  return withStyles(theme => ({
    container: {
      paddingTop: props.size*2 || 50,
      paddingBottom: props.size*2 || 50,
    }
  }),{withTheme: true})(PreloadComponent)
};

class PreloadFull extends React.PureComponent {

  constructor(props,context) {
    super(props);
  }

  componentWillMount() {
    this.StyledPreloadFull = StyleWithThemeProps(this.props);
  }

  componentWillUpdate(nextProps) {
    this.StyledPreloadFull = StyleWithThemeProps(nextProps);
  }

  render() {
    const { StyledPreloadFull,props } = this;
    return (
      <StyledPreloadFull {...props}/>
    );
  }
}

PreloadFull.defaultProps = {
  size: 20
};

export default PreloadFull;

@ up209d यह काम करता है, लेकिन यह काफी दर्दनाक है, मैं withStyles को संशोधित करने की कोशिश करूंगा, अधिक सीधे https://github.com/cssinjs/react-jss का उपयोग करने के लिए जो मूल्यों में प्रोप पास कर सकता है

@ श्रीकांत चेब्रोलू क्या आप अपने संदेश को किसी अन्य मुद्दे पर ले जा सकते हैं, क्योंकि यह विषय में नहीं है?

बस जिज्ञासु कि इस पर क्या स्थिति है? मैं इस मुद्दे के माध्यम से पढ़ रहा हूं, जेएसएस दस्तावेज़, सामग्री-यूआई दस्तावेज़, और अभी तक मुई + जेएसएस + टाइपस्क्रिप्ट के लिए कोई समाधान नहीं ढूंढ रहा है जिसके लिए मुझे इनलाइन शैलियों का उपयोग करने की आवश्यकता नहीं है। कुछ इनलाइन शैलियों को रखना कभी-कभी अपरिहार्य होता है, लेकिन मेरे मामले में ऐसी कई शैलियाँ हैं जिनमें कई अलग-अलग अवस्थाएँ हैं, सभी थीम और प्रॉप्स पर एक साथ निर्भर हैं: निराश:

@chazsolo अरे injectSheet से react-jss बजाय withStyles से mui । इस तरह आपके पास props और theme दोनों हो सकते हैं।

import injectSheet from 'react-jss';

const styles = theme => ({
  container: {
     color: props => theme.palette[props.color || 'primary'].main
  }
});

...

export default injectSheet(styles)(AnyComponent);

import { JssProvider, jss, createGenerateClassName } from 'react-jss/lib';
import { MuiThemeProvider } from 'material-ui';

const generateClassName = createGenerateClassName();

...

<JssProvider jss={jss} generateClassName={generateClassName}>
  <MuiThemeProvider theme={props.theme} sheetsManager={new Map()}>
    <App/>
  </MuiThemeProvider>
</JssProvider>

@chazsolo मुझे लगता है कि आप इस मुद्दे का अनुसरण करना चाहते हैं https://github.com/cssinjs/jss/issues/682

धन्यवाद @kof और @up209d - सब्सक्राइब किया और up209d के उदाहरण को एक शॉट दिया।

@up209d
दुर्भाग्य से मुझे नहीं लगता कि यह मेरे लिए काम करेगा - मैंने जो सुझाव दिया है उसे मैंने लागू किया है, और मैं styles ऑब्जेक्ट के अंदर फ़ंक्शन कॉल के भीतर प्रोप देख सकता हूं, लेकिन मुझे त्रुटियां मिलती रहती हैं। मैं सिर्फ प्रकार याद कर रहा हूँ? मैं प्रोप इंटरफेस में WithStyles का विस्तार कर रहा हूं, इसलिए मेरे पास प्रोप में classes ऑब्जेक्ट तक पहुंच है (अब मैं सोच रहा हूं कि https://github.com/mui- में संदर्भित समस्या है या नहीं- org/material-ui/issues/8726#issuecomment-337482040)

TS2344: Type '(theme: ITheme) => { arc: { stroke: string; strokeWidth: (props: any) => string | number; }; arcM...' does not satisfy the constraint 'string | Record<string, CSSProperties> | StyleRulesCallback<string>'.
  Type '(theme: ITheme) => { arc: { stroke: string; strokeWidth: (props: any) => string | number; }; arcM...' is not assignable to type 'StyleRulesCallback<string>'.
    Type '{ arc: { stroke: string; strokeWidth: (props: any) => string | number; }; arcMovement: { strokeDa...' is not assignable to type 'Record<string, CSSProperties>'.
      Property 'arc' is incompatible with index signature.
        Type '{ stroke: string; strokeWidth: (props: any) => string | number; }' is not assignable to type 'CSSProperties'.
          Types of property 'strokeWidth' are incompatible.
            Type '(props: any) => string | number' is not assignable to type 'string | number | undefined'.
              Type '(props: any) => string | number' is not assignable to type 'number'.

मेरी थीम इस तरह दिखती है:

import { ITheme } from '...';

export default (theme: ITheme) => ({
  arc: {
    // ...
    strokeWidth: (props: any): number | string => {
      // this logs the correct data I'm expecting
      console.log(props.data[0].properties.name)
      return 1.5
    }
  },
  arcMovement: {
    // ...
  },
})

यह दिलचस्प है, जब मैं अपने घटक के भीतर classes ऑब्जेक्ट का उपयोग करता हूं, arc और arcMovement मान्य गुण हैं:

// from Chrome console
{
  arc: "Arcs-arc-0-2-1 Arcs-arc-0-2-3",
  arcMovement: "Arcs-arcMovement-0-2-2"
}

अद्यतन

मैं यह काम करने में सक्षम था, लेकिन जैसा कि ऊपर टिप्पणी में उल्लेख किया गया है, मुझे WithStyles , withStyles सभी संदर्भों को अलग करना पड़ा, और मैं classes रचना और विषय खो देता हूं घोंसला बनाना मैं इसे अभी आराम करने वाला हूं और केवल धागों पर नजर रखता हूं। पूरी सहायताके लिए शुक्रिया!

@chazsolo अरे style ऑब्जेक्ट के props के अंदर classes तक पहुंचना चाहते हैं। यदि ऐसा है, तो मुझे लगता है कि यह असंभव है क्योंकि classes केवल jss बाद style ऑब्जेक्ट को संसाधित करने के बाद उपलब्ध है, बनाने की प्रक्रिया से पहले आप classes तक कैसे पहुंच सकते हैं classes भी ट्रिगर नहीं किया गया है?

मुझे लगता है कि @caub ने पहले ही एक समाधान प्रदान कर दिया है। बस थोड़ा ट्विस्ट के साथ घोल को दोबारा पोस्ट करें। किसी अतिरिक्त पुस्तकालय की आवश्यकता नहीं है।

अपना खुद का रैपर बनाएं withStylesProps ।

import { withStyles } from 'material-ui/styles';

const styles = ( theme, props ) => ({
    exampleStyle: {
           color: 'red'  // <-- or try theme.palette.primary[600]
    }
})

const withStylesProps = ( styles ) =>
  Component =>
    props => {
      const Comp = withStyles(theme => styles(theme, props))(Component);
      return <Comp {...props} />;
    };

const YourComponent = ({  classes }) => 
      <Typography type="display4" className={classes.exampleStyle}>{type}</Typography>

export default withStylesProps(styles)(YourComponent);

यदि आप प्रत्येक घटक के लिए withStylesProps बनाना पसंद नहीं करते हैं, तो इसे अलग फ़ाइल में जोड़ने का प्रयास करें और जहां चाहें आयात करें।

@iamthuypham टिप के लिए धन्यवाद। हालांकि जब मैं अपने घटक को withStylesProps साथ लपेटता हूं, तो संक्रमण घटक <Collapse की एनीमेशन मैं लिपटे घटक के अंदर कहीं भी उपयोग कर रहा हूं काम करना बंद कर देता है।

@ jdolinski1 क्या आप अपना कोड उदाहरण कॉपी/पेस्ट कर सकते हैं?

@iamthuypham आपके समाधान में हर बार एक घटक <style> टैग बनाने की कमी है। साथ ही, आप डिफ़ॉल्टप्रॉप का उपयोग करते समय सावधान हो सकते हैं और उन्हें अपने HOC'd घटक में जोड़ सकते हैं, न कि मूल घटक।

यह सब react-jss द्वारा समर्थित है, क्या इसे मूल रूप से material-ui द्वारा समर्थित नहीं किया जा सकता है?

साथ ही, मुझे लगता है कि @ jdolinski1 की समस्या यह है कि आपका कोड children का प्रचार नहीं करता है जो लपेटा हुआ घटक हो सकता है।

@iamthuypham मुझे लगता है कि ऐसा करने की अनुशंसा नहीं की जाती है, जैसा कि मैं अतीत में ऐसा करता था, और जब तक ऐप विकास बहुत जल्द हो जाता है, तब तक आप खराब प्रदर्शन का अनुभव कर सकते हैं। नए jss style ऑब्जेक्ट के साथ component का एक नया उदाहरण बनाना कोडिंग सिद्धांत की दृष्टि से अच्छा नहीं है क्योंकि style ऑब्जेक्ट को पूरी तरह से, बार-बार, हर बार फिर से प्रस्तुत किया जाना चाहिए समय प्रति props परिवर्तन। injectSheet से react-jss का उपयोग करना बेहतर विकल्प है। यदि आप injectSheet देखते हैं तो आप देखेंगे कि यह आपकी style वस्तु को 2 टुकड़ों ( static और dynamic ) में तोड़ देता है, इसलिए केवल dynamic जब props बदलते हैं तो फिर से रेंडर हो जाते हैं।

इंजेक्टशीट के साथ जेएसएस-नेस्टेड जैसे प्लगइन्स का उपयोग कैसे करें?

इंजेक्शनशीट के साथ मुझे '&: होवर' कथन काम नहीं मिल रहा है।
स्टाइल के साथ मैं सहारा तक नहीं पहुंच सकता ...

@koutsenko यहाँ एक उदाहरण है:

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    },
    border: 0,
    borderRadius: 3,
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

export default function Hook() {
  const classes = useStyles({
    color: "red",
    hover: "blue"
  });
  return <Button className={classes.root}>Hook</Button>;
}

https://codesandbox.io/s/pw32vw2j3m

मुझे उम्मीद है यह मदद करेगा।

वाह, यह आश्चर्यजनक है कि हमने ~1 साल 😍 में जो प्रगति की है।

अब आप इसे कैसे टाइप करते हैं?

@stunaz अच्छा सवाल है। मुझे नहीं पता। मैंने इस पर गौर नहीं किया है। @ eps1lon ने मॉड्यूल की टाइपस्क्रिप्ट परिभाषा की है। आप इसे शुरुआती बिंदु के रूप में उपयोग कर सकते हैं।
https://github.com/mui-org/material-ui/blob/f4281a77d15b0d6eec9d33cdc358cfb89844996d/packages/material-ui-styles/src/index.d.ts#L72

@koutsenko यहाँ एक उदाहरण है:

धन्यवाद @oliviertassinari , " react@next " के साथ यह अब काम करता है।

@koutsenko यदि आप jss-nested काम नहीं कर सके, तो यह आपके कोडिंग में कहीं न कहीं कॉन्फ़िगरेशन समस्या होनी चाहिए। चूंकि jss-nested को jss-default-preset , इसलिए यह सिर्फ काम करता है

https://stackblitz.com/edit/react-py6w2v

@oliviertassinari

क्या आप किसी दिए गए चयनकर्ता के लिए प्रोप के साथ संपूर्ण स्टाइल ऑब्जेक्ट भी सेट कर सकते हैं? आप सशर्त रूप से संपत्ति को कहां लागू कर सकते हैं?

उदाहरण के लिए, इस तरह

withStyles({
    root: {
        '& > path': (props) => {
            if(props.color)
                return {
                    fill: props.color
                };
           return {};
        }
    }
})

ताकि, यदि प्रोप मौजूद नहीं है, तो यह पिछले भरण मूल्य का उपयोग करता है, बजाय इसके कि मुझे इसे सेट करना है? उदाहरण के लिए, ऐसे अन्य नियम हैं जो आम तौर पर भरने के लिए लागू होते हैं, लेकिन मैं केवल इस नई भरण संपत्ति को सेट करना चाहता हूं यदि color प्रोप सेट है।

धन्यवाद!

@Guardiannw किसी कारण से आपका संस्करण काम नहीं करता है। हो सकता है कि @kof हमारे प्रकाश को बढ़ा सके क्यों । आप निम्न में से कोई एक कर सकते हैं:

// 🏆
const useStyles = makeStyles({
  root: {
    "& > span": {
      backgroundColor: props => props.color || null,
    }
  }
});

// or 

const useStyles = makeStyles({
  root: props => ({
    "& > span": {
      backgroundColor: props.color || null
    }
  })
});

@oliviertassinari मुझे withStyles फ़ंक्शन के साथ काम करने के लिए आपका दूसरा विकल्प प्राप्त करने में कठिनाई हो रही है। क्या यह केवल makeStyles और हुक के साथ काम करता है?

@Guardiannw यह @material-ui/styles किसी भी एपीआई के साथ काम कर रहा है।

@oliviertassinari एक मान्य सिंटैक्स की तरह दिखता है, fn मान v10 में जोड़े गए थे, इसलिए या तो v9 का उपयोग किया गया था या मुझे कोडैंडबॉक्स प्रजनन की आवश्यकता है

ठीक है, मैंने यही कोशिश की है। फिर से कोशिश करनी पड़ सकती है।

@oliviertassinari मेरे पास @ मटेरिया-यूआई/शैलियों के उपयोग के बारे में एक प्रश्न है, क्या यह उपलब्ध है और उत्पादन वातावरण में उपयोग करने के लिए?, दस्तावेज़ीकरण में इंगित करता है कि यह स्थिर संस्करण के साथ काम नहीं करता है, मैं इसका उपयोग कर रहा हूं " 3.9.1", उदाहरण https://github.com/mui-org/material-ui/issues/8726#issuecomment -452047345 जो आप प्रस्तुत करते हैं उसमें एक शक्तिशाली और उपयोगी विशेषता है जिसकी मुझे आवश्यकता है। इन मुद्दों में, मैंने एक अलग दृष्टिकोण से कई टिप्पणियां देखीं और मुझे @caub का समाधान https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636 पसंद है , लेकिन उनके बारे में आपकी टिप्पणी समाधान अच्छा है।

@contrerasjf0 @material-ui/styles केवल अल्फा रिलीज के रूप में उपलब्ध है। हम प्रतिक्रिया पारिस्थितिकी तंत्र में अधिकांश पैकेजों की तरह अल्फा संस्करणों का इलाज करते हैं। मैं अनुशंसा करता हूं कि आप उत्पादन में कभी भी अल्फा पैकेज का उपयोग न करें। यदि आप करते हैं तो आपको किसी भी रिलीज के बीच बग और ब्रेकिंग परिवर्तनों की अपेक्षा करनी चाहिए यानी आपको मंथन अल्फा संस्करण जोड़ने में सक्षम होना चाहिए।

मुझे उम्मीद है कि लोग उन संस्करणों का उपयोग या तो शौक परियोजनाओं में करते हैं या इसे एक अलग शाखा पर उपयोग करते हैं जो उत्पादन के लिए तैनात नहीं है लेकिन फिर भी उत्पादन शाखा की तरह परीक्षण किया जाता है। मैं उन सभी लोगों की सराहना करता हूं जो उन अल्फा संस्करणों का उपयोग करते हैं और हमें उनके लिए प्रतिक्रिया देते हैं।

@ up209d हाँ, आपका समाधान काम करता है, लेकिन साथ
styles = { name: { cssprop: props => {} } संकेतन, नहीं
styles = props => ({ name: { cssprop: {} })

साथ ही, JssProvider आवश्यक नहीं है।

@koutsenko

// at value level:
styles = { name: { cssprop: props => value }
styles = theme => ({ name: { cssprop: props => value })

// at class name level
styles = { name: props => ({ cssprop: value })  }
styles = theme => ({ name: props => ({ cssprop: value })  })

आप शीर्ष स्तर पर props तक नहीं पहुंच सकते, यहां तक ​​कि theme बाद दूसरे तर्क के रूप में भी

मुझे एक रास्ता मिला

// MyComponent.tsx
import React, { PureComponent } from 'react';
import { myComponentWithStyles } from './myComponentWithStyles';

export interface MyComponentProps {
  copy: string;
  size?: number;
}

export class Twemoji extends PureComponent<myComponentWithStyles> {
  public render() {
    const { copy, classes } = this.props;

    return (
      <div className={classes.message}>
        {copy}
        <img src="https://via.placeholder.com/150" />
    </div>
    );
  }
}

// myComponentWithStyles.tsx
import React from 'react';
import { withStyles, WithStyles, Theme } from '@material-ui/core';
import { MyComponent, MyComponentProps } from './my-component';

const styles = (props: Theme & MyComponentProps) => ({
  message: {
    fontSize: props.typography.caption.fontSize,
    'box-sizing': 'content-box',
    '& img': {
      width: `${props.size || 24}px`,
      height: `${props.size || 24}px`,
      padding: '0 4px',
      verticalAlign: 'middle',
    },
  },
});

export type myComponentWithStyles = WithStyles<any>;

export const Component = (props: MyComponentProps) => {
  const StyledComponent = withStyles((theme: Theme) => styles({ ...props, ...theme }))(
    MyComponent
  );

  return <StyledComponent {...props} />;
};



md5-d0e1b51e375682cf2aad9c4d66b6c73a



<Component size={12} />

@andreasonny83 इस पैटर्न से बचें। हम v4 में एक देशी एपीआई प्रदान कर रहे हैं।

@oliviertassinari अपडेट के लिए धन्यवाद। क्या वह पैटर्न पहले से उपलब्ध है? कोई दस्तावेज उपलब्ध है?

https://next.material-ui.com/css-in-js/basics/#adapting -based-on-props

एक आखिरी सवाल @oliviertassinari । क्या मैं makeStyles को withStyles संयोजन में उपयोग कर सकता हूं?

मुझे इसके लिए दस्तावेज नहीं मिल रहा है। मैं जो करने की कोशिश कर रहा हूं वह यह है:

const useStyles = makeStyles({
  message: {
    boxSizing: 'content-box'
  }
});

export const ComponentWithStyles = withStyles(useStyles())(MyComponent);

@andreasonny83

• makeStyles प्रतिक्रिया-हुक के लिए है
• withStyles HOC समान सिंटैक्स को स्वीकार करता है

एक या दूसरे का उपयोग करें, अपने उदाहरण में बस makeStyles हटा दें:

const styles = { message: {boxSizing: 'content-box', background: props => props.bg} };
export const ComponentWithStyles = withStyles(styles)(MyComponent);

Gday लोगों ने सोचा कि आईडी उपरोक्त चर्चा के संदर्भ में मेरे वर्तमान समाधान को साझा करती है, उम्मीद है कि यह किसी की मदद करता है या कोई मेरे वर्तमान समाधान पर बेहतर सलाह दे सकता है। मेरे साइनइन पेज आईडी के लिए एक यादृच्छिक पृष्ठभूमि छवि की तरह लेकिन आईडी अभी भी सामग्री यूआई एपीआई की शक्ति को बनाए रखना पसंद करती है। ऑथपेज सिर्फ पैरेंट प्रेजेंटेशन लेयर है जो अलग-अलग ऑथ घटकों (साइनइन, लॉक, भूल-पासवर्ड, पासवर्ड-रीसेट, आदि) को बच्चों के रूप में लेता है। पुष्टि कर सकते हैं कि प्रत्येक पृष्ठ AuthPageContainer प्रोप के भीतर एक नए पृष्ठभूमि लोड के साथ-साथ एक अच्छे दृढ़ता से टाइप किए गए प्रॉप्स को ताज़ा करता है

// AuthPage.styles.tsx

import { Container } from "@material-ui/core";
import { ContainerProps } from "@material-ui/core/Container";
import { withStyles } from "@material-ui/core/styles";
import React from "react";

interface IAuthContainerProps extends ContainerProps {
  background: string;
}

export const AuthContainer = withStyles({
  root: props => ({
    alignItems: "center",
    backgroundImage: `url(${props.background})`,
    backgroundPosition: "50% 50%",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    display: "flex",
    height: "100vh",
    justifyContent: "center",
    margin: 0,
    padding: 0,
    width: "100%"
  })
})((props: IAuthContainerProps) => <Container maxWidth={false} {...props} />);

// AuthPage.tsx

import React from "react";
import forest from "../../assets/backgrounds/forest.jpg";
import sky from "../../assets/backgrounds/sky.jpg";
import uluru from "../../assets/backgrounds/uluru.jpg";
import { AuthContainer } from "./AuthPage.styles";

const AuthPage = ({ children }) => {
  const generateBackground = () => {
    const backgrounds = [forest, sky, uluru];
    const index = Math.floor(Math.random() * backgrounds.length);
    return backgrounds[index];
  };

  return (
    <AuthContainer background={generateBackground()}>{children}</AuthContainer>
  );
};

export default AuthPage;

बस कुछ ऐसा करें:

// styles.js
export default theme => ({
    root: props => ({
        // some styles
    }),
    ...
});

//container.js
export default withStyles(styles)(MyComponent);

राज्य भी पारित करने के बारे में क्या?

@ लक्की1984
आप नहीं कर सकते। इसके बजाय आप कर सकते हैं:

// Component.js
<Button
    className={`
        ${classes.button} 
        ${this.state.isEnable
            ? classes.enable
            : classes.disable}
    `}
/>

या इसके बजाय clsx https://www.npmjs.com/package/clsx का उपयोग

@caub आपका समाधान जेएसएस जेनरेटेड क्लासनाम ऑर्डर को बर्बाद कर देता है।
जैसे यहाँ लिखा है: https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636
मैंने आपके समाधान का उपयोग करने की कोशिश की है, लेकिन आपका एचओसी घटक (स्टाइल्सप्रॉप्स के साथ) समाधान इसके साथ स्टाइल के कॉल में देरी करता है, क्योंकि यह लपेटा हुआ है, इसलिए इसे क्लासनाम के साथ कॉल करना सीएसएस को ओवरराइड नहीं करता है।
जैसे: https://codesandbox.io/s/hocs-8uhw1?file=/index.js

बैकग्राउंड #0000000 होना चाहिए और रंग: नीला