Material-ui: withStyles가 스타일 개체에 소품을 전달할 수 있습니까?

react-jss와 동일한 컨텍스트 키를 사용하여 Material-UI를 만들어 문제를 해결할 수 있을 것입니다. https://github.com/cssinjs/theming/blob/master/src/channel.js#L1.
또한 #7633을 살펴보십시오.

react-jss 상호 운용성 예제로 PR을 준비했습니다. 문서에 추가하겠습니다. cc @kof

@oliviertassinari 이 문제의 해결은 이제 스타일 정의 내에서 소품에 액세스할 수 있어야 한다는 것을 의미합니까? 방법이 명확하지 않습니다...

@pelotom 아니요, withStyles는 속성에 액세스할 수 없습니다. 그러나 얼마나 많은 사람들이 이 기능을 요구하는지 감안할 때. 버그 수정 후 우선순위를 정할 수 있습니다. injectionSheet 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);

현재로서는 이러한 유형의 사용 사례에 접근하는 방법에 대한 권장 사항이 있습니까? 또는 withStyles를 사용할 때 소품 액세스 지원을 추가할 수 있을 것으로 예상되는 시기가 있습니까?

@nmchaves 사용 사례는 인라인 스타일 접근 방식에 완벽하게 부합하는 것 같습니다. 설명서에서 이에 대해 조금 찾을 수 있습니다. 자주하는 질문
https://github.com/callemall/material-ui/blob/75a30061e76eae93c711ec202a2c7e4238a4f19a/docs/src/pages/style/SvgIcons.js#L38 -L44

@oliviertassinari 감사 withStyles 사용하여 이 작업을 수행할 수 있기를 바랐지만 인라인 스타일이 잘 작동할 것입니다. 그리고 문서에서 여기 +를 권장한다는 사실은 이 결정에 대해 매우 확신을 갖게 합니다. 다시 한번 감사합니다!

backgroundImage의 스타일에 소품(이미지 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 ​​in react-jss가 있습니다. 왜 material-ui에서 사용할 수 없는지 궁금합니다. 또한 인라인 style prop이 동적 값에 적합하지만 모든 스타일 정의를 같은 위치에 두는 것이 더 낫다고 말씀하신 요점을 이해합니다. 보다 효율적인 동적 스타일을 위해 className 및 style 를 처리하는 https://github.com/airbnb/react-with-styles 도

나는 같은 문제에 직면 해있다. 누군가 나를 도울 수 있습니까?
`'react'에서 React 가져오기;
'prop-types'에서 PropType을 가져옵니다.
'material-ui/styles'에서 { withStyles } 가져오기;
'material-ui/Drawer'에서 서랍 가져오기;
'material-ui/AppBar'에서 AppBar 가져오기;
'material-ui/Toolbar'에서 도구 모음 가져오기;
'material-ui/List'에서 목록 가져오기;
'material-ui/Typography'에서 타이포그래피 가져오기;
'material-ui/IconButton'에서 IconButton 가져오기;
import Hidden from 'material-ui/Hidden';
'material-ui/Divider'에서 디바이더 가져오기;
'material-ui-icons/Menu'에서 MenuIcon 가져오기;
'./tileData'에서 { mailFolderListItems, otherMailFolderListItems } 가져오기;

const 서랍 너비 = 240;

const 스타일 = 테마 => ({
루트: {
너비: '100%',
키: 430,
marginTop: theme.spacing.unit * 3,
z인덱스: 1,
오버플로: '숨김',
},
앱프레임: {
위치: '상대적',
디스플레이: '플렉스',
너비: '100%',
높이: '100%',
},
앱바: {
위치: '절대',
marginLeft: 서랍 너비,
[theme.breakpoints.up('md')]: {
너비: calc(100% - ${drawerWidth}px) ,
},
},
navIconHide: {
[theme.breakpoints.up('md')]: {
표시: '없음',
},
},
서랍 헤더: theme.mixins.toolbar,
서랍용지: {
너비: 250,
[theme.breakpoints.up('md')]: {
너비: 서랍 너비,
위치: '상대적',
높이: '100%',
},
},
콘텐츠: {
backgroundColor: theme.palette.background.default,
너비: '100%',
패딩: theme.spacing.unit * 3,
높이: '계산(100% - 56px)',
여백상단: 56,
[theme.breakpoints.up('sm')]: {
높이: '계산(100% - 64px)',
여백상단: 64,
},
},
});

내보내기 클래스 ResponsiveDrawer는 React.Component {를 확장합니다.
상태 = {
mobileOpen: 거짓,
};

handleDrawerToggle = () => {
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,
};

기본 내보내기 withStyles(styles)(ResponsiveDrawer);
`

삽입된 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 문서, material-ui 문서를 읽었지만 아직 인라인 스타일을 사용할 필요가 없는 Mui+Jss+TypeScript에 대한 솔루션을 찾지 못했습니다. 몇 가지 인라인 스타일을 넣는 것이 때로는 불가피하지만 제 경우에는 테마와 소품에 모두 의존하는 다양한 상태를 가진 여러 스타일이 있습니다.

@chazsolo Hey Chaz, 실제로 withStyles from mui 대신 injectSheet from react-jss 를 사용할 수 있습니다. 그런 식으로 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 개체 내부의 함수 호출 내에서 소품을 볼 수 있지만 계속 오류가 발생합니다. 내가 유형을 놓치고 있습니까? props Interfaces에서 WithStyles 를 확장하고 있으므로 props의 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 Hey Chaz, 확실하지 않지만 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> 태그를 생성하는 단점이 있습니다. 또한 defaultProps를 사용할 때 주의하고 기본 구성 요소가 아닌 HOC 구성 요소에 추가할 수 있습니다.

이 모든 것이 react-jss 에서 지원되며, 기본적으로 material-ui 지원되지 않습니까?

또한 @jdolinski1 의 문제는 코드가 래핑된 구성 요소에 있을 수 있는 children 전파하지 않는다는 것입니다.

@iamthuypham 예전에 그랬던 것처럼 그렇게 하는 것은 권장하지 않는 것 같고, 앱이 빨리 성장하는 한 성능이 저하될 수 있습니다. 새로운 jss style 객체로 component 의 새 인스턴스를 생성하는 것은 style 객체가 완전히 다시 렌더링되어야 하기 때문에 코딩 원칙 측면에서 좋지 않습니다. props 변경당 시간. injectSheet 에서 react-jss 것이 더 나은 선택입니다. injectSheet 를 살펴보면 style 개체를 2개의 조각( static & dynamic )으로 나누므로 dynamic props 변경되면 dynamic 가 다시 렌더링됩니다.

InjectSheet와 함께 jss-nested와 같은 플러그인을 사용하는 방법은 무엇입니까?

주입 시트를 사용하면 '&: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

도움이 되기를 바랍니다.

와, ~1년 동안 우리가 이룩한 발전이 놀랍습니다😍.

이제 어떻게 타이핑합니까?

@stunaz 좋은 질문입니다. 모르겠어요. 나는 그것을 조사하지 않았다. @eps1lon 은 모듈의 TypeScript 정의를 완료했습니다. 시작점으로 사용할 수 있습니다.
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 에 포함되어 있으므로 oob

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 의 API 중 하나와 작동합니다.

@oliviertassinari 는 유효한 구문처럼 보입니다. fn 값이 v10에 추가되었으므로 v9가 사용되었거나 코드 및 상자 재생이 필요합니다.

좋아, 그게 내가 그것을 시도한 것입니다. 다시 시도해야 할 수도 있습니다.

@oliviertassinari @materia-ui/styles 사용에 대해 질문이 있습니다. 프로덕션 환경에서 사용할 수 있고 사용할 수 있습니까? 설명서에 안정적인 버전에서는 작동하지 않는다고 나와 있습니다. 저는 " 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의, 그러나에 대한 의견을 자신의 솔루션이 좋습니다.

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

theme 다음의 두 번째 인수로도 최상위 수준에서 props 에 액세스할 수 없습니다.

방법을 찾았어요

// 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에서 기본 API를 제공하고 있습니다.

@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 사람들은 위의 토론을 참조하여 현재 솔루션을 공유한다고 생각했습니다. 누군가 또는 누군가가 현재 솔루션에 대해 더 나은 조언을 제공할 수 있기를 바랍니다. 임의의 배경 이미지와 같은 내 로그인 페이지 ID의 경우 ID는 여전히 재료 UI API의 힘을 유지하고 싶습니다. AuthPage는 개별 인증 구성 요소(로그인, 잠금, 비밀번호 분실, 비밀번호 재설정 등)를 자식으로 사용하는 부모 프레젠테이션 레이어일 뿐입니다. 각 페이지를 새로 고칠 때마다 새로운 백그라운드 로드와 AuthPageContainer prop 내의 강력한 형식의 props를 확인할 수 있습니다.

// 인증페이지.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} />);

// 인증페이지.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 귀하의 솔루션은 jss 생성 클래스 이름 순서를
여기에 작성된 것처럼: https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636
귀하의 솔루션을 사용하려고 시도했지만 귀하의 HOC 구성 요소(withStylesProps) 솔루션은 래핑되어 있기 때문에 withStyles의 호출을 지연시키므로 classNames로 호출해도 CSS가 재정의되지 않습니다.
좋아요: https://codesandbox.io/s/hocs-8uhw1?file=/index.js

배경은 #0000000이고 색상은 파란색이어야 합니다.