Material-ui: [साथ स्टाइल] स्टाइल ऑब्जेक्ट के भीतर से कंपोनेंट के प्रॉप्स प्राप्त करने की क्षमता जोड़ें

प्रतिक्रिया-जेएसएस उस सुविधा को लागू करता है। आप इसे हमेशा हमारे स्टाइलिंग समाधान पर उपयोग कर सकते हैं। यहां उस सुविधा को लागू करने की वास्तविक प्रेरणा घटकों के सरल/बेहतर आंतरिक कार्यान्वयन के आसपास होनी चाहिए।

React-jss injectStyles() यह भी करता है, लेकिन ऐसा लगता है कि StyleRuleCallback प्रॉप्स जोड़ना बेहतर होगा।

const styles = (props, theme) => ({})
इस तरह आप सहारा के आधार पर केवल मूल्यों तक ही सीमित नहीं हैं।

@Shamplol प्रतिक्रिया से मुझे लगता है कि हम इस नई सुविधा का लाभ उठा सकते हैं ताकि उपयोगकर्ता पूर्वनिर्धारित के बजाय हमारे घटकों को एक कस्टम color प्रदान कर सकें। CSS आकार का प्रभाव स्पष्ट नहीं है, लेकिन यह घटक रंग को और भी सरल बना देगा। यह जांच करने वाली बात है। फिर, एक बार css वेरिएबल ब्राउज़र समर्थन काफी अधिक हो जाने पर (अब से 2 वर्ष?), हम इस पर भरोसा कर सकते हैं।

@oliviertassinari वास्तव में कुछ मामलों में सीएसएस का आकार कम नहीं होगा?
जैसा कि मैं इसे प्राप्त करता हूं, हम वर्तमान में ...Primary और ...Accent लिए सभी वर्गों को परिभाषित करते हैं - क्या इस परिवर्तन का मतलब यह नहीं होगा कि हमें केवल ...Colorized लिए कक्षाएं बनाए रखनी होंगी? या आप उत्पन्न सीएसएस के बारे में चिंतित हैं?

किसी भी तरह से, मुझे लगता है कि यह डीएक्स में काफी सुधार करेगा क्योंकि हमें मूल रूप से जटिल वर्गों जैसे https://github.com/callemall/material-ui/blob/v1-beta/src/Button/Button.js#L11 को फिर से लागू करना होगा जब हम गैर पैलेट रंगों का उपयोग करना चाहते हैं।

कुछ मामलों में सीएसएस आकार वास्तव में कम नहीं होगा?

@ सकुलस्ट्रा बताना मुश्किल है। यह क्रियान्वयन पर निर्भर करेगा। शायद :)।

टाइपस्क्रिप्ट टाइपिंग के नजरिए से, यह अच्छा होगा यदि _both_ props और theme को स्टाइल विनिर्देश के भीतर इस तरह से एक्सेस किया जा सकता है:

const styles = {
  button: {
    background: ({ theme }) => theme.palette.primary[200]
  },
  root: {
    backgroundImage: ({ props }) => `url(${props.backgroundImage})`
  }
};

कारण यह है कि टाइपस्क्रिप्ट अक्सर withStyles लिए सही प्रकार का अनुमान लगाने में विफल रहता है जब इसे फ़ंक्शन ऑब्जेक्ट पास किया जाता है, इसलिए आपको इसे काम करने के लिए अतिरिक्त प्रकार की टिप्पणियां प्रदान करनी होंगी, उदाहरण के लिए

withStyles<'button' | 'root'>(theme => ...)

यदि प्रॉप्स को भी पास किया जाता है, तो यह बन जाएगा

withStyles<'button' | 'root', Props>((theme, props) => ...)

इसकी वर्तमान स्थिति क्या है? उस सुविधा का होना वाकई अच्छा होगा

@lucasmafra मैंने इस सुविधा को पोस्ट v1 रिलीज़ माइलस्टोन में जोड़ा है। जितनी जल्दी हम v1 जारी कर सकें, उतना अच्छा है।

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

आप हमेशा एक कस्टम थीम सेट कर सकते हैं, और इस कन्वेंशन का उपयोग कर सकते हैं: हम वास्तव में पसंद करते हैं कि कैसे स्टाइल वाले घटक आपको MuiThemeProvider के अंदर थीमप्रोवाइडर को नेस्ट करके बॉक्स के बाहर प्रॉप्स.थीम तक पहुंच प्रदान करते हैं, जब दोनों को थीम = {थीम} कहा जाता है। यह उस डिफ़ॉल्ट थीम का विस्तार करता है जिसे मुई उजागर करता है

//inline with HOC Method
 h1 style= {{ 'color: this.props.theme.palette.primary[500]' }}

//styled components ( no method necessary )
const Heading = styled.h1`
  color: ${p => p.theme.palette.primary['500']};
`

मुझे केवल फ़ंक्शन मानों का उपयोग करने की आवश्यकता थी, इसलिए मैंने प्रतिक्रिया-जेएसएस ' injectSheet() फ़ंक्शन का उपयोग किया। मुझे मुई के withStyles() फ़ंक्शन का उपयोग करने के लिए उपयोग किया जाता है, तो स्टाइल के बजाय इंजेक्शनशीट का उपयोग करते समय कोई कमी है?

@ डेमियन-मोन्नी आपको अपने एमयूआई थीम तक पहुंच नहीं मिलती है।

सभी को नमस्कार, मैं केवल सामग्री-यूआई शैली-घटकों-जैसे एपीआई के अपने संस्करण को साझा करना चाहता था। यह "भारी" परीक्षण नहीं है लेकिन ऐसा लगता है कि यह अच्छी तरह से काम करता है और प्रदान करता है:

• स्टाइल फ़ंक्शन के लिए props और theme फहराया।
• लिपटे घटक के लिए कस्टम props करना
• React.forwardRef माध्यम से अग्रेषण रेफरी
  (संपादित करें: रेफरी वर्तमान में केवल एचटीएमएल टैग के लिए काम कर रहे हैं, अधिकांश आधार सामग्री-यूआई घटकों के लिए नहीं, इसके लिए आंतरिक समर्थन की आवश्यकता है। मेरे पास समय होने पर पीआर पर काम कर सकता है, इसके लिए function या object स्वीकार करने की आवश्यकता होगी।

संबंधित मुद्दे: #10825, #7633

स्टाइल.जेएस

import React, { Component } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';

function styled(WrappedComponent, customProps) {
  return (style, options) => {
    class StyledComponent extends Component {
      render() {
        let {
          forwardRef,
          classes,
          className,
          ...passThroughProps
        } = this.props;
        return (
          <WrappedComponent
            ref={forwardRef}
            className={classNames(classes.root, className)}
            {...passThroughProps}
            {...customProps}
          />
        );
      }
    }

    StyledComponent.propTypes = {
      classes: PropTypes.object.isRequired,
      className: PropTypes.string,
    };

    let hoistedProps = {};

    const styles =
      typeof style === 'function'
        ? theme => {
            return { root: style({ ...theme, theme, props: hoistedProps }) };
          }
        : { root: style };

    const WithRef = withStyles(styles, options)(StyledComponent);

    return React.forwardRef((props, ref) => {
      hoistedProps = props;
      return <WithRef {...props} forwardRef={ref} />;
    });
  };
}

export default styled;

उदाहरण उपयोग

const MobileNav = styled('nav')(({ theme, props }) => ({
  '&.pos-fixed': {
    top: 0,
    position: props.fixed ? 'fixed' : 'absolute',
    zIndex: 99,
    animation: 'fadeInDown 0.3s ease-out forwards',
    backgroundColor: theme.palette.common.white,
  },
}));

कस्टम सहारा के साथ

const StyledButton = styled(Button, { component: Link })(
  ({ theme, props }) => ({
    color: props.disabled ? 'gray' : 'blue',
    [theme.breakpoints.down('sm')]: {
      color: 'red',
    },
  })
);

@oliviertassinari इस समस्या को हल करने के लिए, मैं नीचे दिए गए समाधान का उपयोग कर रहा हूं:

    componentWillMount() {
        const {color} = this.props;
        jss.setup(jssPreset());
        const stylesheet = jss.createStyleSheet({
            underline: {
              "&:after": {
                backgroundColor: `${color} !important`
              }
            }
        }).attach();
        this.underlineClass = stylesheet.classes.underline;
    }

यह बहुत अच्छा काम करता है लेकिन क्या कुछ संभावित मुद्दे हैं जो मैं नहीं देख रहा हूँ? मुझे यह पसंद नहीं है कि मुझे दो बार jss.setup को कॉल करना होगा उदाहरण के लिए 😅। मुझे यकीन नहीं है कि मैं jss जीवनचक्र को समझता हूं। मुझे आश्चर्य हुआ कि मुझे यहां setup() का आह्वान करने की आवश्यकता थी।

यह बहुत अच्छा काम करता है लेकिन क्या कुछ संभावित मुद्दे हैं जो मैं नहीं देख रहा हूँ?

@wcandillon कुछ संभावित मुद्दे जो मैं देख सकता हूं: 1. आप हर बार नए वर्ग के नाम इंजेक्ट करेंगे जब घटक का एक उदाहरण आरोहित हो। 2. आप अपने घटक को सर्वर-साइड रेंडर करने में सक्षम नहीं होंगे। 3. आपको सही CSS ओवरराइड इंजेक्शन ऑर्डर नहीं मिलेगा।

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

https://github.com/JacquesBonet/jss-material-ui

एक परियोजना पर सफलतापूर्वक परीक्षण किया गया।

सबसे पहले, मैं डेनियलमहोन समाधान का उपयोग करता हूं, लेकिन स्टाइल इनहेरिटेंस समस्या प्राप्त करता हूं।

@oliviertassinari क्या इस समय गतिशील सीएसएस/एनीमेशन बनाने के लिए हमारे पास वैकल्पिक दृष्टिकोण है? धन्यवाद :)

@HunderlineK कुछ विकल्प: https://material-ui.com/customization/overrides/#2 -dynamic-variation-for-a-one-time-situation।

@danielmahon आपका दृष्टिकोण वही है जो मैं अभी अपनी समस्या को हल करने के लिए देख रहा हूं, हालांकि "स्टाइल कंपोनेंट" नए प्रॉप्स प्राप्त होने पर फिर से प्रस्तुत नहीं करता है। क्या आपने कुछ और कोशिश की है?

मैं कुछ अलग सोचूंगा, और अगर मैं कुछ लेकर आता हूं तो मैं आपको बता दूंगा

💰 बस उस पर $50 का इनाम संलग्न किया :)

https://www.bountysource.com/issues/47838203-withstyles-add-the-ability-to-get-the-component-s-props-from-within-the-style-object

जैसे @lewisdiamond ने कहा, const styles = (props, theme) => ({}) वास्तव में साफ-सुथरा होगा।

या const styles = (theme, props) => ({}) नॉन-ब्रेकिंग हो सकता है।

मैं इस मुद्दे को v1.x मील के पत्थर में जोड़ रहा हूं। काफी लोग इसकी मांग कर रहे हैं। हम जल्द ही उस तक पहुंचेंगे।

@oliviertassinari शायद withStyles के टाइपिंग के लिए इसका महत्वपूर्ण प्रभाव पड़ता है, मुझे बताएं कि क्या मैं इसमें मदद कर सकता हूं

@pelotom धन्यवाद, मैं आपको

क्या इस संबंध में कार्य प्रगति पर है? यह आईएमओ की एक प्रमुख विशेषता है, शायद मैं इसके साथ मदद कर सकता हूं।

संपादित करें: मैंने इस पर काम करना शुरू कर दिया। styles फ़ंक्शन को प्रॉप्स पास करने में प्रबंधित किया जाता है जिसे withStyles स्वीकार करता है, केवल समस्या यह है कि प्रोप बदलते समय शैलियों को अपडेट नहीं किया जाता है। इसका समाधान होने पर पीआर बनाएंगे।

नमस्ते, मैं अभी एक उपयोग के मामले में आया था जहाँ मुझे अवतार घटक के रंगों को अनुकूलित करने के लिए इसकी आवश्यकता थी और इसके अलावा घटक के सभी प्रकारों के लिए शैली को नियंत्रित करने का कोई अन्य तरीका नहीं है।

const styles = theme => ({
  chip:{
  },
  separator: {
    marginRight: theme.spacing.unit,
  },
  fright: {
    float: 'right',
  },
  fleft: {
    float: 'left',
  },
  outlinedPrimary:{
    color: props =>  stringToColor( props.username),
    border: props => `1px solid ${fade(stringToColor(props.username), 0.5)}`,
    '$clickable&:hover, $clickable&:focus, $deletable&:focus': props => ({
      backgroundColor: fade(stringToColor(props.username), theme.palette.action.hoverOpacity),
      border: `1px solid ${stringToColor(props.username)}`,
      }),
  },
  outlined: {
    backgroundColor: 'transparent',
    border: props => `1px solid ${
      theme.palette.type === 'light' ? stringToColor(props.username) : fade(stringToColor(props.username))
    }`,
    '$clickable&:hover, $clickable&:focus, $deletable&:focus': props => ({
      backgroundColor: fade(stringToColor(props.username), theme.palette.action.hoverOpacity),
      }),
    },
});

आप मेरे समाधान जैप्रोग्रामर की जांच कर सकते हैं: https://github.com/JacquesBonet/jss-material-ui

धन्यवाद, मैं इसे देख लूंगा।

मुझे आज से पहले इस सुविधा की आवश्यकता थी इसलिए मैंने एक एचओसी लिखा। withStyles कुछ कैशिंग अपने आप करता है इसलिए मैं वास्तव में यह नहीं बता सकता कि यह कितना प्रभावित करता है लेकिन मैं अपने खाली समय में withStyles के कैशिंग कार्यान्वयन को देखूंगा, अब कोई भी खोज रहा है प्रॉप्स और थीम प्राप्त करने का त्वरित तरीका अच्छा खेलने के लिए आप वहां जाएं

चेतावनी

यह घटक एक पूर्ण रिमाउंट करेगा यदि प्रॉप्स स्टाइलशीट क्लास के इंडेक्स नंबर के साथ कुछ करने के लिए कुछ बदलते हैं या स्टाइल एचओसी में कुछ बदलते हैं

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

const { createElement, forwardRef } = React

const withPropsStyles = ( style ) => {

    const withPropsStyles = ( component ) => {

        return forwardRef( (props, ref) => {

            const proxy = (theme) => style(props, theme)

            const hoc = withStyles(proxy)(component)

            return props.children ? 
                createElement(hoc, { ...props, ref}, props.children) :
                createElement(hoc, {...props, ref}) 
        }) 
    }

    return withPropsStyles
}

export default withPropsStyles

उदाहरण उपयोग

const styles = (props, theme) => ({
    root:{
        backgroundColor: props.light ? theme.palette.primary.light : theme.palette.primary.main 
    },
})

const SomeComponent = ({classes}) => <div className={classes.root}/>

export default withPropsStyles(styles)(SomeComponent)

निष्कर्ष

सरल और काम करता है (लेकिन पूरी रीमाउंट लागत भी रिम करें)

इस परिवर्तन के साथ क्या हम पुस्तकालय से 100% JSS के पक्ष में इनलाइन शैली के उपयोग को हटा सकते हैं? मेरा ऐप इनलाइन शैलियों के साथ काम नहीं करता है और जब मैं जेएसएस के साथ लहर प्रभाव को बदलने के लिए गया तो मुझे एहसास हुआ कि मुझे इस सुविधा की आवश्यकता है। हो सकता है कि एक छोटा प्रदर्शन हिट हो, लेकिन क्लीनर लगता है।

@koshea इनलाइन शैली को withStyles के लिए एक डेकोरेटर के रूप में या उदाहरण के रूप में प्रतिस्थापन में एक बूंद के रूप में ठीक काम करना चाहिए।

मैं यह भी उल्लेख करना चाहता था कि इनलाइन शैलियों का उपयोग मजबूत सामग्री सुरक्षा नीति को सक्षम करने की अनुमति नहीं देता है।
इसे स्टाइल निर्देशों में unsafe-inline ध्वज जोड़ने की आवश्यकता है, जो सुरक्षित नहीं है।

प्रॉप्स सपोर्ट वाली डायनेमिक स्टाइल को उस समस्या का समाधान करना चाहिए

नमस्ते दोस्तों, "बस इसी तरह" चर्चा में कूदने के लिए खेद है। मैंने हाल ही में मुई (टाइपस्क्रिप्ट के साथ) का उपयोग करना शुरू किया है और जब तक मुझे यह एक अत्यंत शक्तिशाली पुस्तकालय लगता है, निश्चित रूप से इसकी जटिलताएं हैं।

मैंने ऊपर कुछ टिप्पणियों में देखा है कि इस बात पर थोड़ी चर्चा है कि क्या यह सुविधा (props, theme) => {} या (theme, props) => {} होनी चाहिए। मैं अपनी टिप्पणी में props और theme नामित संपत्तियों को बनाने के बारे में @pelotom ने जो कहा, उसे सुदृढ़ करना

धैर्य के लिए सभी को धन्यवाद! #13503 में इस मुद्दे पर ध्यान दिया जा रहा है। यह घटक सहायकों के लिए एक आवश्यकता है जिसे हम लागू करना चाहते हैं। हमने हुक एपीआई के साथ भी प्रयोग करना शुरू कर दिया है: https://twitter.com/olivtassinari/status/1058805751404261376।

क्या इसने इसे 4.0 में बनाया? ऐसा लगता है कि makeStyles कॉलबैक में props पैरामीटर नहीं है।

@ शहर41 const classes = useStyles(props);

अच्छा ऐसा है। तो ऐसा लगता है

const useStyles = makeStyles(theme => {
    return {
        foo: {
            color: theme.props.danger ? '#ff0000' : '#00ff00'
        }
    };
});

function MyComponent(props) {
    const classes = useStyles(props);

    return <div className={classes.foo}>...</div>;
}

मुझे यह वेबसाइट पर स्टाइल एपीआई सेक्शन में प्रलेखित नहीं दिख रहा है। मुझे देखने दो कि क्या मैं पीआर भेज सकता हूं।

@city41 https://material-ui.com/styles/basics/#adapting -based -on-

बढ़िया, यह देखकर खुशी हुई कि डॉक्स अपडेट हो रहे हैं। इस मुद्दे पर आने वाले किसी और के लिए, यहां बताया गया है कि मैंने एक घटक को स्टाइल करने के लिए थीम और प्रॉप्स को कैसे जोड़ा

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

interface ButtonProps {
    destructive: boolean;
}

const useButtonStyles = makeStyles<Theme, ButtonProps>(theme => {
    return {
        root: props => ({
            backgroundColor: props.destructive ? theme.palette.error.main : theme.palette.primary.main
        })
    };
});

export const PrimaryButton: React.FunctionComponent<ButtonProps> = props => {
    const classes = useButtonStyles(props);

    return <Button {...props} className={classes.root} variant="contained" />;
};

मैं बाहरी शैलियों जेसन फ़ाइल में प्रोप का उपयोग कैसे कर सकता हूं?

उदाहरण के लिए यह बाहरी फ़ाइल है

const typographyStyle = {
  title2: {
    fontFamily:"Montserrat",
    fontStyle:"normal",
    fontWeight:"800",
    fontSize:"72px",
    lineHeight:"88px",
    letterSpacing:"-0.02em",
    // color:"#304C82"
    color : props => {
      console.log(props,'c1');
      return props.color
    }

  }
};

export default typographyStyle;

मैं इस फ़ाइल को आयात करता हूँ और वस्तु को फैलाता हूँ

import typographyStyle from "../assets/jss/material-kit-pro-react/views/componentsSections/typographyStyle";


const styles = theme =>  ({
    ...typographyStyle,
    homeSearch:{
        width: '100%',
        '& div':{
            '& input':{
                "color":"#304C82",
                height: 65,
                fontFamily: 'Open Sans',
                fontStyle: 'normal',
                fontWeight: 800,
                fontSize: '48px',
                lineHeight: '65px',
                letterSpacing: '-0.03em',
                '&::placeholder':{
                    fontFamily: 'Open Sans',
                    fontStyle: 'normal',
                    fontWeight: 800,
                    fontSize: '48px',
                    lineHeight: '65px',
                    letterSpacing: '-0.03em',
                    color: '#EAEAEA'
                }
            }
        }
    },

  });

अब कलर फंक्शन पर मुझे प्रॉप्स = {} मिलता है।

क्या कोई इस संबंध में मेरी मदद कर सकता है?

अपडेट करें:

ऐसा लगता है कि मैं कुछ गलत कर रहा हूं क्योंकि मुझे अपनी मुख्य शैलियों में भी खाली वस्तु मिल रही है। जेएस फ़ाइल

    homeSearch: props => {
        console.log(props);
        return {
        width: '100%',
        border:  `1px solid ${props.color}`
        ,
        '& div':{
            '& input':{
                "color":"#304C82",
                height: 65,
                fontFamily: 'Open Sans',
                fontStyle: 'normal',
                fontWeight: 800,
                fontSize: '48px',
                lineHeight: '65px',
                letterSpacing: '-0.03em',
                '&::placeholder':{
                    fontFamily: 'Open Sans',
                    fontStyle: 'normal',
                    fontWeight: 800,
                    fontSize: '48px',
                    lineHeight: '65px',
                    letterSpacing: '-0.03em',
                    color: '#EAEAEA'
                }
            }
        }
    }
},