Material-ui: هل يمكن لـ withStyles تمرير الدعائم إلى كائن الأنماط؟

من المحتمل أن نكون قادرين على معالجة المشكلة عن طريق إنشاء Material-UI باستخدام نفس مفتاح السياق مثل رد فعل jss: https://github.com/cssinjs/theming/blob/master/src/channel.js#L1.
ألقِ نظرة أيضًا على # 7633

لديّ علاقات عامة جاهزة مع مثال على إمكانية التشغيل البيني التفاعلي. سأضيف ذلك إلى المستندات. cc @ kof

oliviertassinari هل يعني هذا القرار أنه من الممكن الآن الوصول إلى الدعائم ضمن تعريف الأنماط؟ ليس من الواضح بالنسبة لي كيف ...

pelotom لا ، ليس لدى withStyles حق الوصول إلى الخصائص. ولكن بالنظر إلى عدد الأشخاص الذين يطلبون هذه الميزة. إنه شيء يمكنني تحديد أولوياته ، بعد إصلاحات الأخطاء. يمكنك استخدام injectSheet المخصص، لكنه فتح الباب أمام العديد من القضايا: تسرب الذاكرة، والساخنة إعادة كسر، لا 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);

في الوقت الحالي ، هل لديك أي توصيات حول كيفية التعامل مع هذه الأنواع من حالات الاستخدام؟ أو هل لديك أي تقديرات للوقت الذي قد تتمكن فيه من إضافة دعم للوصول إلى الدعائم عند استخدام withStyles؟

يبدو أن nmchaves الذي تستخدمه الحالة التعليمات
https://github.com/callemall/material-ui/blob/75a30061e76eae93c711ec202a2c7e4238a4f19a/docs/src/pages/style/SvgIcons.js#L38 -L44

oliviertassinari شكرا! كنت آمل أن أتمكن من تحقيق ذلك باستخدام withStyles ، لكن الأنماط المضمنة ستعمل بشكل رائع. وحقيقة أنك توصي به هنا + في المستندات تجعلني أشعر بثقة كبيرة بهذا القرار. شكرا لك مرة أخرى!

سيكون من الجيد أن تكون قادرًا على تمرير دعامة (صورة src) إلى نمط صورة الخلفية

سألتف 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 ​​في رد فعل- jss ، أتساءل لماذا لا يمكن استخدامها في واجهة المستخدم المادية؟ كما أفهم وجهة نظرك حيث تقول إن الخاصية style المضمنة مثالية للقيم الديناميكية ، ولكن من الأجمل أن يكون لديك كل تعريفات الأنماط في نفس الأماكن. هناك أيضًا https://github.com/airbnb/react-with-styles التي من شأنها التعامل مع className و style لأنماط ديناميكية أكثر كفاءة

أواجه نفس المشكلة هل يمكن لأحد أن يساعدني
"استيراد رد من" رد فعل "؛
استيراد PropTypes من "أنواع العناصر" ؛
استيراد {withStyles} من "material-ui / styles" ؛
استيراد درج من "material-ui / Drawer" ؛
استيراد AppBar من "material-ui / AppBar" ؛
استيراد شريط الأدوات من "material-ui / Toolbar" ؛
استيراد قائمة من "material-ui / List" ؛
استيراد الطباعة من "واجهة المستخدم المادية / الطباعة" ؛
استيراد IconButton من "material-ui / IconButton" ؛
استيراد مخفي من "واجهة المستخدم المادية / المخفية" ؛
استيراد فاصل من "material-ui / Divider" ؛
استيراد MenuIcon من "material-ui-icons / Menu" ؛
استيراد {mailFolderListItems ، otherMailFolderListItems} من './tileData' ؛

عرض الدرج الثابت = 240 ؛

أنماط const = موضوع => ({
جذر: {
العرض: 100٪ ،
الارتفاع: 430 ،
marginTop: theme.spacing.unit * 3 ،
z فهرس: 1 ،
إخفاء الفائض'،
} ،
appFrame: {
الموضع: "نسبي" ،
عرض: "فليكس" ،
العرض: 100٪ ،
الارتفاع: 100٪ ،
} ،
appBar: {
الموقف: "مطلق" ،
marginLeft: drawerWidth ،
[theme.breakpoints.up ('md')]: {
العرض: calc(100% - ${drawerWidth}px) ،
} ،
} ،
navIconHide: {
[theme.breakpoints.up ('md')]: {
عرض لا شيء'،
} ،
} ،
drawerHeader: theme.mixins.toolbar ،
درج الورق: {
العرض: 250 ،
[theme.breakpoints.up ('md')]: {
العرض: drawerWidth ،
الموضع: "نسبي" ،
الارتفاع: 100٪ ،
} ،
} ،
المحتوى: {
backgroundColor: theme.palette.background.default ،
العرض: 100٪ ،
المساحة المتروكة: theme.spacing.unit * 3 ،
الارتفاع: "احسب (100٪ - 56 بكسل)" ،
الهامش الأعلى: 56 ،
[theme.breakpoints.up ('sm')]: {
الارتفاع: "احسب (100٪ - 64 بكسل)" ،
الهامش الأعلى: 64 ،
} ،
} ،
}) ؛

تقوم فئة التصدير ResponsiveDrawer بتوسيع React.Component {
الدولة = {
mobileOpen: خطأ ،
} ؛

handleDrawerToggle = () => {
this.setState ({mobileOpen:! this.state.mobileOpen}) ؛
} ؛

يقدم - يجعل() {
const {class، theme} = 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>
);

}
}

RespiveDrawer.propTypes = {
الفئات: PropTypes.object.isRequired ،
الموضوع: PropTypes.object.isRequired ،
} ؛

تصدير الافتراضي مع الأنماط (الأنماط) (RespiveDrawer) ؛
"

سينمو CSS المحقون مع عدد مثيلات المكون.

oliviertassinari ستنمو CSS المحقونة + - بنفس الطريقة التي ينمو بها html مع الأنماط المضمنة. يتم تقديم الأنماط الثابتة في أوراق منفصلة وإعادة استخدامها عبر جميع مثيلات المكونات.

لقد فعلت ذلك ، على الرغم من أنه مع المكون عديم الحالة ، فإنه سيعيد عرض 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 والذي يمكنه تمرير الدعائم في القيم

SrikanthChebrolu ، هل يمكنك نقل رسالتك إلى مشكلة مختلفة ، لأنها ليست ضمن الموضوع؟

مجرد فضول ما هو الوضع على هذا؟ لقد قرأت من خلال هذه المشكلة ، مستندات JSS ، ومستندات واجهة المستخدم المادية ، ولم أجد بعد حلًا لـ Mui + Jss + TypeScript لا يتطلب مني استخدام أنماط مضمنة. أحيانًا يكون وضع بعض الأنماط المضمنة أمرًا لا مفر منه ، ولكن في حالتي هناك أنماط متعددة لها العديد من الحالات المختلفة ، وكلها تعتمد على السمة والدعائم معًا: خيبة الأمل:

chazsolo مرحبًا Chaz ، يمكنك بالفعل استخدام 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 - تم الاشتراك وإعطاء مثال 209d لقطة.

@ 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 مرحبًا Chaz ، لست متأكدًا ولكن هل تريد الوصول إلى classes داخل props style للكائن 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 وليس المكونات الأساسية.

كل ذلك مدعوم من react-jss ، ألا يمكن دعمه محليًا بواسطة material-ui ؟

أيضًا ، أعتقد أن مشكلة @ jdolinski1 هي أن الكود الخاص بك لا ينشر children الذي قد يحتويه المكون المغلف.

iamthuypham أعتقد أنه لا يُنصح بالقيام بذلك ، حيث كنت أفعل ذلك في الماضي ، وقد تواجه ضعف الأداء طالما أن التطبيق ينمو في وقت قريب جدًا. إنشاء مثيل جديد من component مع عنصر jss style ليس جيدًا من حيث مبدأ الترميز لأن الكائن style يجب إعادة عرضه بالكامل ، مرارًا وتكرارًا ، كل الوقت لكل تغيير props . استخدام injectSheet من react-jss هو الخيار الأفضل. إذا نظرت إلى injectSheet فسترى أنه يقسم الكائن style إلى قطعتين ( static & dynamic ) لذلك فقط dynamic احصل على إعادة تصيير عند تغيير props .

كيفية استخدام الإضافات مثل jss-nested مع injectionSheet ؟.

باستخدام injectionSheet ، لا يمكنني الحصول على عبارات "&: hover".
مع withStyles لا يمكنني الوصول إلى الدعائم ...

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

اتمني ان يكون مفيدا.

واو ، إنه لأمر مدهش التقدم الذي أحرزناه في حوالي عام واحد 😍.

الآن كيف تطبع ذلك؟

stunaz سؤال جيد. انا لا اعرف. أنا لم أنظر في ذلك. قام @ eps1lon بتعريف TypeScript للوحدة النمطية. يمكنك استخدامه كنقطة انطلاق.
https://github.com/mui-org/material-ui/blob/f4281a77d15b0d6eec9d33cdc358cfb89844996d/packages/material-ui-styles/src/index.d.ts#L72

koutsenko هنا مثال:

شكرًا oliviertassinari ، مع " رد فعل @ التالي " يعمل الآن.

koutsenko إذا لم تتمكن من عمل jss-nested ، فيجب أن تكون مشكلة تكوين في مكان ما في الترميز الخاص بك. نظرًا لأن jss-nested مضمن في jss-default-preset ، لذا فهو يعمل فقط

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

تضمين التغريدة

هل يمكنك أيضًا تعيين كائن الأنماط بالكامل لمحدد معين باستخدام الدعائم؟ إلى أين يمكنك تطبيق خاصية مشروطة؟

على سبيل المثال ، مثل هذا

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 لدي سؤال حول استخدام @ materia-ui / الأنماط ، هل هي متوفرة واستخدامها في بيئة إنتاج ؟، تشير الوثائق في الوثائق إلى أنها لا تعمل مع الإصدار الثابت ، فأنا أستخدم " 3.9.1 "، المثال https://github.com/mui-org/material-ui/issues/8726#issuecomment -452047345 الذي تقدمه به ميزة قوية ومفيدة أحتاج إليها. في هذه القضايا ، رأيت العديد من التعليقات من منظور مختلف وأيضًا أحب الحل https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636 من caub ، لكن تعليقك حوله الحل جيد.

@ conterasjf0 @material-ui/styles متاح فقط كإصدار ألفا. نتعامل مع إصدارات ألفا مثل معظم الحزم في نظام التفاعل البيئي. أوصي بعدم استخدام أي عبوات ألفا في الإنتاج. إذا قمت بذلك ، فيجب أن تتوقع حدوث أخطاء وتغييرات متقطعة بين أي إصدار ، على سبيل المثال ، يجب أن تكون قادرًا على التعامل مع إضافة إصدارات ألفا.

ما آمله هو أن يستخدم الأشخاص هذه الإصدارات إما في مشاريع الهوايات أو استخدامها في فرع منفصل لم يتم نشره للإنتاج ولكن لا يزال يتم اختباره تمامًا مثل فرع الإنتاج. أنا أقدر كل من يستخدم تلك الإصدارات الأولية ويعطينا ردود فعل لهم.

@ up209d نعم ، الحل الخاص بك يعمل ، ولكن مع
styles = { name: { cssprop: props => {} } تدوين ، لا
styles = props => ({ name: { cssprop: {} })

أيضًا ، JssProvider ليس ضروريًا.

تضمين التغريدة

// 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 تجنب هذا النمط. نحن نقدم واجهة برمجة تطبيقات أصلية في الإصدار 4.

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);

يارب احفظها

• makeStyles مخصص لخطافات التفاعل
• يقبل withStyles HOC نفس البنية

استخدم أحدهما أو الآخر ، في المثال الخاص بك فقط قم بإزالة makeStyles :

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

يعتقد Gday folks أن معرف يشارك الحل الحالي الخاص بي بالإشارة إلى المناقشة أعلاه ، آمل أن يساعد شخصًا ما أو شخصًا ما في تقديم نصيحة أفضل حول الحل الحالي. بالنسبة لمعرف صفحة تسجيل الدخول الخاص بي مثل صورة خلفية عشوائية ولكن المعرف لا يزال يرغب في الحفاظ على قوة واجهة المستخدم المادية لواجهة برمجة التطبيقات. إن AuthPage هي مجرد طبقة العرض الأصلية التي تأخذ مكونات المصادقة الفردية (تسجيل الدخول ، المقفل ، كلمة المرور المنسية ، إعادة تعيين كلمة المرور ، إلخ) كأطفال. يمكن التأكيد مع كل صفحة تحديث يتم تحميل خلفية جديدة بالإضافة إلى الدعائم الرائعة المكتوبة بقوة داخل خاصية 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);

ماذا عن تمرير الدولة أيضا؟

@ luky1984
لا يمكنك. بدلاً من ذلك يمكنك القيام بما يلي:

// 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
لقد حاولت استخدام الحل الخاص بك ، لكن حل مكون HOC الخاص بك (withStylesProps) يؤخر الاتصال به مع الأنماط ، لأنه ملفوف ، لذا فإن استدعائه باستخدام classNames لا يتجاوز css.
مثل: https://codesandbox.io/s/hocs-8uhw1؟file=/index.js

يجب أن تكون الخلفية # 0000000 واللون: أزرق