Material-ui: [withStyles] 스타일 개체 내에서 구성 요소의 소품을 가져오는 기능 추가

react-jss는 해당 기능을 구현합니다. 우리의 스타일링 솔루션 위에 항상 사용할 수 있습니다. 여기에서 해당 기능을 구현하는 진정한 동기는 구성 요소의 더 간단하고 더 나은 내부 구현에 관한 것입니다.

react-jss injectStyles() 도 이 작업을 수행하지만 StyleRuleCallback 에 props를 추가하는 것이 더 나은 것 같습니다.

const styles = (props, theme) => ({})
그렇게 하면 소품에 따라 값에만 제한되지 않습니다.

@Shamplol 피드백을 통해 사용자가 사전 정의된 항목 대신 사용자 정의 color 를 구성 요소에 제공할 수 있도록 이 새로운 기능을 활용할 수 있다고 생각합니다. CSS 크기 영향은 명확하지 않지만 구성 요소 색상 재정의를 훨씬 더 간단하게 만듭니다. 이것은 조사할 사항입니다. 그런 다음 CSS 변수 브라우저 지원이 충분히 높으면(지금부터 2년?), 우리는 그것에 의존할 수 있습니다.

@oliviertassinari 경우에 따라 CSS 크기가 실제로 줄어들지 않습니까?
내가 아는 한, 우리는 현재 ...Primary 및 ...Accent 대한 모든 클래스를 정의합니다. 이 변경은 ...Colorized 대한 클래스만 유지해야 한다는 것을 의미하지 않습니까? 아니면 생성된 CSS가 걱정되십니까?

어느 쪽이든, 기본적으로 https://github.com/callemall/material-ui/blob/v1-beta/src/Button/Button.js#L11 과 같은 복잡한 클래스를 다시 구현해야 하므로 dx가 크게 향상될 것이라고 생각합니다. 비 팔레트 색상을 사용하고 싶습니다.

어떤 경우에는 CSS 크기가 실제로 줄어들지 않습니까?

@sakulstra 말하기 어렵습니다. 구현에 따라 다릅니다. 아마도 :).

TypeScript 타이핑 관점에서 _ props 및 theme 모두 스타일 사양 내에서 다음과 같이 액세스할 수 있으면 좋을 것입니다.

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

그 이유는 TypeScript가 함수 개체를 전달할 때 withStyles 대한 올바른 유형을 추론하는 데 자주 실패하기 때문입니다. 따라서 작동하려면 추가 유형 주석을 제공해야 합니다.

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

소품도 전달되면 다음이 됩니다.

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

현재 상태는 어떻습니까? 그 기능이 있으면 정말 좋겠지만

@lucasmafra 이 기능을 v1 릴리스 이정표 이후에 추가했습니다. v1을 빨리 출시할수록 좋습니다.

이 기능은 소품, 미디어 쿼리 및 대화형 상태를 결합하는 표현 스타일 규칙을 작성할 수 있는 핵심입니다. 해당 기능을 인라인 스타일로 바꿀 수 없습니다. 불행히도 withStyles 는 이것이 추가될 때까지 내 프로젝트에서 사용할 수 없습니다.

언제든지 사용자 정의 테마를 설정할 수 있고 다음 규칙을 사용할 수 있습니다. 우리는 스타일이 지정된 구성 요소가 모두 theme={theme}를 호출할 때 MuiThemeProvider 내부에 ThemeProvider를 중첩하여 기본적으로 props.theme에 액세스할 수 있는 방법을 정말 좋아합니다. mui가 노출하는 기본 테마를 확장합니다.

//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']};
`

저는 그냥 함수 값을 사용해야 해서 react-jss의 injectSheet() 함수를 사용했습니다. Mui의 withStyles() 함수를 사용하는데, withStyle 대신 injectSheet를 사용할 때 단점이 있습니까?

@damien-monni MUI 테마에 액세스할 수 없습니다.

안녕하세요, Material-UI styled-components-like API의 제 버전을 공유하고 싶었습니다. "많이" 테스트되지는 않았지만 잘 작동하고 다음을 제공합니다.

• props 및 theme 를 스타일 기능으로 끌어 올렸습니다.
• 래핑된 구성 요소에 사용자 정의 props 전달
• React.forwardRef 를 통해 참조 전달
  (편집: 참조는 현재 대부분의 기본 Material-UI 구성 요소가 아닌 html 태그에서만 작동하므로 내부 지원이 필요합니다. 시간이 있을 때 PR에서 작동할 수 있으며 function 또는 object 수락이 필요할 것입니다

관련 문제: #10825, #7633

styled.js

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

프로젝트에서 성공적으로 테스트되었습니다.

처음에는 danielmahon 솔루션을 사용하지만 스타일 상속 문제가 발생합니다.

@oliviertassinari 현재 동적 CSS/애니메이션을 만들기 위한 대안이 있습니까? 감사 해요 :)

@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 감사합니다, 알려드리겠습니다. 이번 달에 문제를 살펴볼 수 있기를 바랍니다.

이에 대한 작업이 진행 중입니까? IMO의 핵심 기능입니다. 제가 도와드릴 수 있습니다.

편집: 나는 그것에 대해 작업하기 시작했습니다. withStyles 허용하는 styles 함수에 props를 전달했지만 문제는 props가 변경될 때 스타일이 업데이트되지 않는다는 것입니다. 해결되면 PR을 작성합니다.

안녕하세요 저는 아바타 구성 요소의 색상을 사용자 정의하기 위해 이것이 필요한 사용 사례를 발견했으며 이것 이외의 구성 요소의 모든 변형에 대한 스타일을 제어할 수 있는 다른 방법이 없습니다.

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

내 솔루션 Japrogramer를 확인할 수 있습니다. https://github.com/JacquesBonet/jss-material-ui

감사합니다. 잘 살펴보겠습니다.

오늘 일찍 이 기능이 필요했기 때문에 HOC를 작성했습니다. withStyles 는 자체적으로 캐싱을 수행하므로 이것이 얼마나 영향을 미치는지 말할 수는 없지만 여가 시간에 withStyles 의 캐싱 구현을 살펴보겠습니다. 소품과 테마를 빠르게 사용하여 멋지게 플레이할 수 있습니다.

경고

이 구성 요소는 props가 withStyles HOC에서 변경되는 스타일시트 클래스의 인덱스 번호 또는 무언가를 변경하는 경우 전체 다시 마운트를 수행합니다.

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)

결론

간단하고 작동합니다(그러나 전체 다시 마운트 비용도 rem)

이 변경으로 100% JSS를 위해 라이브러리에서 인라인 스타일 사용을 제거할 수 있습니까? 내 앱은 인라인 스타일에서 작동하지 않으며 파급 효과를 JSS로 교체하려고 했을 때 이 기능이 필요하다는 것을 깨달았습니다. 약간의 성능 저하가 있을 수 있지만 더 깨끗해 보입니다.

@koshea 는 인라인 스타일을 withStyles 를 대체하는 드롭인으로 잘 작동해야 합니다.

인라인 스타일을 사용하면 강력한 콘텐츠 보안 정책을 사용할 수 없다는 점도 언급하고 싶었습니다.
안전하지 않은 스타일 지시문에 unsafe-inline 플래그를 추가해야 합니다.

소품 지원이 있는 동적 스타일은 이 문제를 해결해야 합니다.

안녕하세요 여러분, "이런 식으로" 토론에 뛰어들어서 죄송합니다. 나는 최근에 Mui(Typescript 포함)를 사용하기 시작했으며 매우 강력한 라이브러리라고 생각하지만 확실히 복잡합니다.

위의 일부 댓글에서 이 기능이 (props, theme) => {} 또는 (theme, props) => {} 여야 하는지에 대한 약간의 토론이 있음을 알았습니다. @pelotom이 props 및 theme 명명된 속성을 모두 만드는 것에 대해 그의 의견 을 강화하고 싶습니다. 그렇게 하면 이 변경 사항이 적용되면 스타일 정의를 리팩토링하기가 더 쉬워질 것입니다. 건배 🙂

기다려주신 모든 분들께 감사드립니다! 이 문제는 #13503에서 처리되고 있습니다. 구현하려는 구성 요소 도우미의 요구 사항입니다. 우리는 또한 후크 API 실험을 시작했습니다: https://twitter.com/olivtassinari/status/1058805751404261376.

이거 4.0으로 나왔나요? makeStyles 콜백에 props 매개변수가 없는 것 같습니다.

@city41 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>;
}

웹 사이트의 스타일 API 섹션에 이것이 문서화되어 있는 것을 볼 수 없습니다. 내가 PR을 보낼 수 있는지 보자.

@city41 https://material-ui.com/styles/basics/#adapting -based -on-props에 문서 시작이 있습니다.

멋지고, 문서가 업데이트되는 것을 보게 되어 기쁩니다. 이 문제를 다루는 다른 사람을 위해 다음은 구성 요소의 스타일을 지정하기 위해 테마와 소품을 결합한 방법입니다.

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" />;
};

외부 스타일 json 파일에서 prop을 어떻게 사용할 수 있습니까?

예를 들어 이것은 외부 파일입니다.

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'
                }
            }
        }
    },

  });

이제 색상 기능에서 props = {} 를 얻습니다.

누군가가 이와 관련하여 나를 도울 수 있습니까?

업데이트:

내 기본 styles.js 파일에서도 빈 개체가 발생하기 때문에 뭔가 잘못된 일을 하고 있는 것 같습니다.

    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'
                }
            }
        }
    }
},