Material-ui: Bisakah withStyles meneruskan alat peraga ke objek gaya?

Kami mungkin harus dapat mengatasi masalah ini dengan membuat Material-UI menggunakan kunci konteks yang sama dengan react-jss: https://github.com/cssinjs/theming/blob/master/src/channel.js#L1.
Lihat juga #7633

Saya memiliki PR yang siap dengan contoh interoperabilitas react-jss. Saya akan menambahkannya ke dalam dokumen. cc @kof

@oliviertassinari apakah resolusi ini berarti bahwa sekarang mungkin untuk mendapatkan akses ke alat peraga dalam definisi gaya? Tidak jelas bagi saya bagaimana ...

@pelotom tidak, withStyles tidak memiliki akses ke properti. Tetapi mengingat berapa banyak orang yang meminta fitur ini. Itu sesuatu yang bisa saya prioritaskan, setelah perbaikan bug. Anda dapat menggunakan injectSheet HOC, tetapi ini membuka pintu untuk banyak masalah: kebocoran memori, pemuatan ulang panas rusak, tidak ada komposisi classes , tidak ada akses referensi internal, penanganan bersarang tema yang rusak. Setidaknya, itulah beberapa masalah yang saya hadapi di masa lalu dan memotivasi saya untuk menulis ulang. Saya pikir langkah demi langkah masalah itu akan diatasi.

@oliviertasinari Sangat meyakinkan mendengar bahwa Anda akan mempertimbangkan untuk memprioritaskan ini! Ini akan membuatnya lebih mudah untuk menyesuaikan komponen. Misalnya, saya ingin memiliki kotak centang dengan ukuran yang dapat dikonfigurasi (yaitu lebar & tinggi dalam piksel):

<CustomCheckbox size={16} />

Jika kita dapat mengakses props di styles , ini akan menjadi sangat sederhana:

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

atau

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

lalu:

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

export default withStyles(styles)(CustomCheckbox);

Untuk saat ini, apakah Anda memiliki rekomendasi tentang bagaimana kita harus mendekati jenis kasus penggunaan ini? Atau apakah Anda memiliki perkiraan kapan Anda mungkin dapat menambahkan dukungan untuk mengakses alat peraga saat menggunakan withStyles?

@nmchaves Anda menggunakan case tampaknya cocok untuk pendekatan gaya sebaris, Anda dapat menemukan sedikit tentangnya di dokumentasi. FAQ
https://github.com/callemall/material-ui/blob/75a30061e76eae93c711ec202a2c7e4238a4f19a/docs/src/pages/style/SvgIcons.js#L38 -L44

Terima kasih @oliviertassinari ! Saya berharap saya bisa mencapai ini menggunakan withStyles , tetapi inline-styles akan bekerja dengan baik. Dan fakta bahwa Anda merekomendasikannya di sini + di dokumen membuat saya merasa sangat yakin dengan keputusan ini. Terima kasih lagi!

akan menyenangkan untuk dapat meneruskan prop (src gambar) ke gaya untuk backgroundImage

Saya akan membungkus 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>
  )
);

demo: https://codesandbox.io/s/k2y01rj3w7

(Saya terkejut ^ berfungsi tanpa pengaturan ThemeProvider dan JssProvider https://codesandbox.io/s/q6v7krx6, ah inisialisasi)

@caub Ini berfungsi, tetapi Anda harus berhati-hati dengan pola ini. CSS yang disuntikkan akan bertambah dengan jumlah instance komponen. Ini duplikat #7633. Saya belum menggali topiknya. Tapi saya percaya versi @kof menggunakan beberapa optimasi kinerja.

@caub Terima kasih telah berbagi!

@olivietassinari ada ini https://github.com/cssinjs/react-jss/blob/master/readme.md#dynamic -values ​​in react-jss, saya bertanya-tanya mengapa itu tidak dapat digunakan di material-ui? Saya juga mengerti maksud Anda di mana Anda mengatakan prop style sebaris sempurna untuk nilai dinamis, tetapi lebih baik memiliki semua definisi gaya di tempat yang sama. Ada juga https://github.com/airbnb/react-with-styles yang akan menangani className dan style untuk gaya dinamis yang lebih efisien

Saya menghadapi masalah yang sama dapatkah seseorang membantu saya?
`impor Bereaksi dari 'bereaksi';
impor PropTypes dari 'prop-types';
import { withStyles } dari 'material-ui/styles';
impor Laci dari 'material-ui/Laci';
impor AppBar dari 'material-ui/AppBar';
impor Toolbar dari 'material-ui/Toolbar';
impor Daftar dari 'material-ui/Daftar';
impor Tipografi dari 'material-ui/Tipografi';
impor IconButton dari 'material-ui/IconButton';
impor Tersembunyi dari 'material-ui/Tersembunyi';
impor Pembagi dari 'material-ui/Pembagi';
impor MenuIcon dari 'material-ui-icons/Menu';
import { mailFolderListItems, otherMailFolderListItems } dari './tileData';

const lebar laci = 240;

const gaya = tema => ({
akar: {
lebar: '100%',
tinggi: 430,
marginTop: theme.spacing.unit * 3,
zIndeks: 1,
luapan: 'tersembunyi',
},
bingkai aplikasi: {
posisi: 'kerabat',
tampilan: 'fleksi',
lebar: '100%',
tinggi: '100%',
},
bilah aplikasi: {
posisi: 'mutlak',
marginLeft: lebar laci,
[tema.breakpoints.up('md')]: {
lebar: calc(100% - ${drawerWidth}px) ,
},
},
navIconSembunyikan: {
[tema.breakpoints.up('md')]: {
tampilan: 'tidak ada',
},
},
laciHeader: theme.mixins.toolbar,
laciKertas: {
lebar: 250,
[tema.breakpoints.up('md')]: {
lebar: lebar laci,
posisi: 'kerabat',
tinggi: '100%',
},
},
isi: {
backgroundColor: theme.palette.background.default,
lebar: '100%',
padding: theme.spacing.unit * 3,
tinggi: 'calc(100% - 56px)',
marginAtas: 56,
[tema.breakpoints.up('sm')]: {
tinggi: 'calc(100% - 64px)',
marginAtas: 64,
},
},
});

kelas ekspor ResponsiveDrawer memperluas React.Component {
keadaan = {
mobileOpen: salah,
};

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

render() {
const { kelas, tema } = 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 = {
kelas: PropTypes.object.isRequired,
tema: PropTypes.object.isRequired,
};

ekspor default withStyles(styles)(ResponsiveDrawer);
`

CSS yang disuntikkan akan bertambah dengan jumlah instance komponen.

@olivietassinari CSS yang disuntikkan akan tumbuh +- dengan cara yang sama html akan tumbuh dengan gaya sebaris. Gaya statis dirender dalam lembar terpisah dan digunakan kembali di semua instance komponen.

Saya memang menyukai ini, meskipun dengan komponen stateless itu akan merender ulang withStyle dari render menjadi render , kita dapat menghindarinya dengan menggunakan komponen murni penuh.

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;

Kami dapat menggunakan komponen murni penuh untuk menghindari pembaruan

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 Berhasil , tetapi cukup menyakitkan, saya akan mencoba memodifikasi withStyles , untuk menggunakan lebih banyak secara langsung https://github.com/cssinjs/react-jss yang dapat memberikan nilai props

@SrikanthChebrolu dapatkah Anda memindahkan pesan Anda ke masalah lain, karena tidak sesuai topik?

Penasaran seperti apa statusnya? Saya telah membaca masalah ini, dokumen JSS, dokumen material-ui, dan belum menemukan solusi untuk Mui+Jss+TypeScript yang tidak mengharuskan saya menggunakan gaya sebaris. Menempatkan beberapa gaya sebaris terkadang tidak dapat dihindari, tetapi dalam kasus saya ada beberapa gaya yang memiliki banyak status berbeda, semuanya bergantung pada tema dan alat peraga :kecewa:

@chazsolo Hei Chaz, Anda sebenarnya dapat menggunakan injectSheet dari react-jss alih-alih withStyles dari mui . Dengan cara itu Anda dapat memiliki props dan 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 Saya pikir Anda ingin mengikuti masalah ini https://github.com/cssinjs/jss/issues/682

Terima kasih @kof dan @up209d - berlangganan dan mencoba contoh up209d.

@up209d
Sayangnya saya tidak berpikir itu akan berhasil untuk saya - saya telah menerapkan apa yang Anda sarankan, dan saya dapat melihat alat peraga dalam panggilan fungsi di dalam objek styles , tetapi saya terus mendapatkan kesalahan. Apakah saya hanya melewatkan tipe? Saya memperluas WithStyles di props Interfaces jadi saya memiliki akses ke objek classes di props (sekarang saya bertanya-tanya apakah itu masalah yang dirujuk di 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'.

Tema saya terlihat seperti:

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: {
    // ...
  },
})

Yang menarik adalah, ketika saya menggunakan objek classes dalam komponen saya, arc dan arcMovement adalah properti yang valid:

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

Memperbarui

Saya dapat menjalankan ini, tetapi seperti yang disebutkan dalam komentar di atas, saya harus menghapus semua referensi ke WithStyles , withStyles , dan saya kehilangan classes komposisi dan tema bersarang Aku akan memberikan istirahat sekarang dan hanya mengawasi benang. Terima kasih atas semua bantuannya!

@chazsolo Hai Chaz, saya tidak yakin tetapi apakah Anda ingin mengakses classes di dalam props dari objek style . Jika ya, menurut saya tidak mungkin karena classes hanya tersedia setelah jss memproses objek style , bagaimana Anda dapat mengakses classes sebelum proses pembuatan classes bahkan belum terpicu?

Saya pikir @caub sudah memberikan solusi. Repost saja solusinya dengan sedikit twist. Tidak perlu perpustakaan tambahan.

Buat pembungkus Anda sendiri 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);

Jika Anda tidak suka membuat withStylesProps untuk setiap komponen, coba tambahkan dalam file terpisah dan impor di mana pun Anda mau.

@iamthuypham Terima kasih atas tipnya. Namun ketika saya membungkus komponen saya dengan withStylesProps , animasi komponen transisi <Collapse saya gunakan di suatu tempat di dalam komponen yang dibungkus berhenti bekerja.

@jdolinski1 Bisakah Anda menyalin/menempelkan contoh kode Anda?

@iamthuypham solusi Anda memiliki kelemahan membuat tag <style> setiap kali komponen dibuat. Juga, Anda mungkin berhati-hati saat menggunakan defaultProps dan menambahkannya ke komponen HOC Anda dan bukan komponen dasar.

Semua itu didukung oleh react-jss , tidak bisakah itu didukung secara asli oleh material-ui ?

Juga, saya pikir masalah @jdolinski1 adalah bahwa kode Anda tidak menyebarkan children yang mungkin dimiliki komponen yang dibungkus.

@iamthuypham Saya pikir tidak disarankan untuk melakukan itu, seperti yang saya lakukan di masa lalu, dan Anda mungkin mengalami kinerja yang buruk selama pertumbuhan aplikasi segera. Membuat instance baru dari component dengan objek baru jss style tidak baik dalam hal prinsip pengkodean karena objek style harus dirender ulang seluruhnya, lagi dan lagi, setiap waktu per props perubahan. Menggunakan injectSheet dari react-jss adalah pilihan yang lebih baik. Jika Anda melihat ke injectSheet Anda akan melihat bahwa objek style Anda pecah menjadi 2 bagian ( static & dynamic ) jadi hanya dynamic dirender ulang saat props berubah.

bagaimana cara menggunakan plugin seperti jss-nested dengan injectSheet?.

dengan injectSheet saya tidak bisa membuat pernyataan '&:hover' berfungsi.
dengan withStyles saya tidak dapat mengakses alat peraga...

@koutsenko Berikut ini contohnya:

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

Saya harap ini membantu.

Wow, luar biasa kemajuan yang telah kita buat dalam ~1 tahun 😍.

sekarang bagaimana Anda mengetik itu?

@stunaz Pertanyaan bagus. Saya tidak tahu. Saya belum melihat ke dalamnya. @eps1lon telah melakukan definisi TypeScript dari modul. Anda dapat menggunakannya sebagai titik awal.
https://github.com/mui-org/material-ui/blob/f4281a77d15b0d6eec9d33cdc358cfb89844996d/packages/material-ui-styles/src/index.d.ts#L72

@koutsenko Berikut ini contohnya:

Terima kasih @olivietassinari , dengan " react@next " berfungsi sekarang.

@koutsenko Jika Anda tidak dapat membuat jss-nested berfungsi, itu pasti masalah konfigurasi di suatu tempat dalam pengkodean Anda. Karena jss-nested disertakan dalam jss-default-preset , jadi itu hanya berfungsi oob

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

@olivietassinari

Bisakah Anda juga mengatur seluruh objek gaya untuk pemilih tertentu dengan alat peraga? Ke mana Anda dapat menerapkan properti secara kondisional?

Misalnya, seperti ini

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

Sehingga, jika prop tidak ada, maka ia menggunakan nilai isian sebelumnya, daripada sesuatu yang harus saya setel? Misalnya, ada aturan lain yang biasanya berlaku untuk fill, tetapi saya hanya ingin menyetel properti fill baru ini jika prop color disetel.

Terima kasih!

@Guardiannw Untuk beberapa alasan varian Anda tidak berfungsi. Mungkin @kof bisa menjelaskan alasannya . Anda dapat melakukan salah satu dari berikut ini:

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

// or 

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

@olivietassinari Saya mengalami kesulitan mendapatkan opsi kedua Anda untuk bekerja dengan fungsi withStyles . Apakah ini hanya berfungsi dengan makeStyles dan kait?

@Guardiannw Ini bekerja dengan salah satu API dari @material-ui/styles .

@olivietassinari terlihat seperti sintaks yang valid, nilai fn ditambahkan di v10, jadi v9 digunakan atau saya memerlukan reproduksi kode dan kotak

Ok, itu yang saya coba. Mungkin harus mencoba lagi.

@olivietassinari Saya punya pertanyaan tentang penggunaan @materia-ui/styles, apakah tersedia dan digunakan di lingkungan produksi?, dalam dokumentasi menunjukkan bahwa itu tidak berfungsi dengan versi stabil, saya menggunakan " 3.9.1", contoh https://github.com/mui-org/material-ui/issues/8726#issuecomment -452047345 yang Anda sajikan memiliki fitur yang kuat dan berguna yang saya butuhkan. Dalam masalah ini, saya melihat banyak komentar dari perspektif yang berbeda dan saya juga menyukai solusinya https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636 dari @caub , tetapi komentar Anda tentangnya solusinya bagus.

@contrerasjf0 @material-ui/styles hanya tersedia sebagai rilis alfa. Kami memperlakukan versi alfa seperti kebanyakan paket di ekosistem reaksi. Saya akan merekomendasikan Anda tidak pernah menggunakan paket alpha dalam produksi. Jika Anda melakukannya, Anda harus mengharapkan bug dan perubahan yang melanggar antara rilis apa pun, yaitu Anda harus dapat menangani penambahan versi alfa churn.

Yang saya harap adalah orang-orang menggunakan versi tersebut baik dalam proyek hobi atau menggunakannya pada cabang terpisah yang tidak digunakan untuk produksi tetapi masih diuji seperti cabang produksi. Saya sangat menghargai semua orang yang menggunakan versi alfa itu dan memberi kami umpan balik untuk mereka.

@ up209d ya, solusi Anda berfungsi, tetapi dengan
styles = { name: { cssprop: props => {} } notasi, bukan
styles = props => ({ name: { cssprop: {} })

Juga, JssProvider tidak diperlukan.

@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 })  })

Anda tidak dapat mengakses props di tingkat atas, bahkan sebagai argumen kedua setelah theme

Saya menemukan cara

// 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 Hindari pola ini. Kami menyediakan API asli di v4.

@olivietassinari terima kasih atas pembaruannya. Apakah pola itu sudah tersedia? Ada dokumentasi yang tersedia?

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

Satu pertanyaan terakhir @olivietassinari . Bisakah saya menggunakan makeStyles dalam kombinasi dengan withStyles ?

Saya tidak dapat menemukan dokumentasi untuk itu. Apa yang saya coba lakukan adalah ini:

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

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

@andreasonny83

• makeStyles adalah untuk kait-reaksi
• withStyles HOC menerima sintaks yang sama

Gunakan salah satu atau yang lain, dalam contoh Anda hapus saja makeStyles :

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

Gday orang berpikir id membagikan solusi saya saat ini dengan mengacu pada diskusi di atas, semoga ini membantu seseorang atau seseorang dapat menawarkan saran yang lebih baik tentang solusi saya saat ini. Untuk id halaman masuk saya seperti gambar latar acak tetapi id masih ingin mempertahankan kekuatan materi ui api. AuthPage hanyalah lapisan presentasi induk yang mengambil komponen auth individual (masuk, terkunci, lupa kata sandi, setel ulang kata sandi, dll) sebagai anak-anak. Dapat mengonfirmasi dengan setiap halaman menyegarkan, latar belakang baru dimuat serta alat peraga yang diketik dengan kuat di dalam prop AuthPageContainer

// Halaman Auth.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} />);

// Halaman Auth.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;

cukup lakukan sesuatu seperti ini:

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

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

bagaimana dengan lulus juga menyatakan?

@luky1984
Anda tidak bisa. Sebagai gantinya, Anda dapat melakukan:

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

Atau gunakan clsx https://www.npmjs.com/package/clsx sebagai gantinya

@caub Solusi Anda merusak urutan nama kelas yang dihasilkan jss.
Seperti yang ditulis di sini: https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636
Saya telah mencoba menggunakan solusi Anda, tetapi solusi komponen HOC (withStylesProps) Anda menunda panggilan withStyles-nya, karena dibungkus, jadi memanggilnya dengan classNames tidak menimpa css.
Seperti: https://codesandbox.io/s/hocs-8uhw1?file=/index.js

latar belakang harus #0000000 dan warna: biru