버튼과 같은 반응 구성요소에서 활성, 호버와 같은 복합 반응 인라인 스타일 설정

버튼과 같은 반응 구성요소에서 활성, 호버와 같은 복합 반응 인라인 스타일 설정

제 단추는 css에 다음과 같은 스타일이 있습니다.부트스트랩도 사용하고 있습니다.

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    background-color: #1f90bb;
    background-position: 0 -15px;
}

반응의 구성요소로 버튼을 정의했습니다.

const MyButton = ({children, onClick, classNames, ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {`${classNames}`}
        {...rest}
    >
        {children}
    </button>
);

서버에서 가져온 값을 바탕으로 버튼의 전체 색상을 변경하고 싶습니다.

질문 1:

버튼의 전체 스타일을 인라인 스타일로 설정하려면 어떻게 해야 합니까?

질문 2:

그리고 좀 써도 될까요?scss다음과 같은 특징mixins에react변수로 동적으로 색을 전달하는 버튼 스타일을 생성하기 위해?

질문 3:

js에서 css를 사용하는 인라인 스타일 또는 클래스 이름을 사용해야 합니까?

버튼과 같은 범용 컴포넌트의 경우 버튼이 정의되어 있는 모든 장소에서 재사용할 수 있는 글로벌클래스를 사용할까요, 아니면 로컬인라인 스타일을 사용하여 모든 장소에서 인라인 스타일을 작성할까요?

JS에서의 CSS(의사 클래스 및 MQ 지원)

유사 클래스를 지원하는 React를 사용하여 CSS를 작성하는 데는 많은 libs가 있지만 모두 인라인 또는 JS에서의 CSS 쓰기를 필요로 하는 것은 아닙니다.이것을 강력히 추천합니다.

CSS 모듈(통상적인 방법으로 CSS를 기입합니다)

CSS 모듈도 있습니다.이미 웹 팩을 사용하고 있는 경우는 간단하게 셋업 할 수 있기 때문에import/requireCSS를 오브젝트로서 다음과 같이 컴포넌트를 사용합니다.

import styles from './Button.css'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {styles.primary}
        {...rest}
    >
        {children}
    </button>
);

컴포넌트 분리

또한, 수업 내용을 전달하면 안 된다는 것도 덧붙이고 싶습니다.<Button />컴포넌트 내부의 조건에 대처합니다.예를 들어 classnames lib를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

import classnames from 'classnames'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        {/* 
          depends on the type prop, you will get the relevent button 
          so no need for consumers to care about the internals of the component
        */}
        className = {classnames('.btn', { [`btn-${type}`]: true })}
        {...rest}
    >
        {children}
    </button>
);

CSS 모듈과classnameslib를 사용하여 강력한 조합을 만듭니다.

개인적으로는 글로벌 CSS를 사용하여 웹팩으로 연결할 것입니다.React를 더욱 깔끔하게 유지하고 모듈러형으로 쉽게 편집할 수 있습니다.

내가 아는 한 SCSS 기능은 React에서 인라인으로 사용할 수 없습니다.

React에서 인라인 스타일을 설정해야 하는 경우 다음과 같이 수행됩니다.

var buttonStyle = {
    backgroundColor: "#229ac8",
    backgroundImage: "linear-gradient(to bottom, #23a1d1, #1f90bb)",
    backgroundRepeat: "repeat-x",
    borderColor: "#1f90bb #1f90bb #145e7a",
    color: "#ffffff",
    textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)"
}

<button style={buttonStyle}>Button</button>

질문 1:

버튼의 전체 스타일을 인라인 스타일로 설정하려면 어떻게 해야 합니까?

공식 문서:

반응에서 인라인 스타일은 문자열로 지정되지 않습니다.대신 키가 스타일 이름의 camelCased 버전이고 값이 스타일 값(일반적으로 문자열)인 개체와 함께 지정됩니다.

다음 css 지정

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

인라인 스타일 표현은 다음과 같습니다.

const MyButton = () =>
(
    <button
        className = { {
            backgroundColor: '#229ac8',
            backgroundImage: 'linear-gradient(to bottom, #23a1d1, #1f90bb)',
            backgroundRepeat: 'repeat-x',
            borderColor: '#1f90bb #1f90bb #145e7a',
            color: '#ffffff',
            textShadow: '0 -1px 0 rgba(0, 0, 0, 0.25)'
        } }
    </button>
);

질문 2

또한 mixins in react와 같은 scss 기능을 사용하여 동적으로 색상을 전달하는 버튼 스타일을 생성할 수 있습니까?

리액트의 인라인 스타일은 css의 추상화일 뿐이다.그것은 다른 화려한 특징이 없다.그러나 인라인 스타일은 객체에 불과하기 때문에 scss mixin을 시뮬레이션하고 변수를 사용할 수 있는 방법으로 동적으로 생성할 수 있습니다.

이것과 같은 scss mixin은

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

다음과 같은 방법으로 달성할 수 있습니다.

const borderRadius = ($radius) => {
    return {
        WebkitBorderRadius: $radius;
        MozBorderRadius: $radius;
        MsBorderRadius: $radius;
        borderRadius: $radius;
    }
}

const MyComponent = () => {
    var inlineStyle = Object.assign({}, borderRadius(10), {
        backgroundColor: 'white'
    })

    return (
        <div style={ inlineStyle }>
            Hello, world!
        </div>
    )
}

질문 3

js에서 css를 사용하는 인라인 스타일 또는 클래스 이름을 사용해야 합니까?

이것으로는 확답을 얻을 수 없다.다만, generic에는 className을, 구체적으로는 inline 스타일을 사용하는 것을 추천합니다.고객의 요구를 만족시키기 위한 코드 관리 방법은 고객에게 달려 있습니다.

hover:「 」 「 」 :

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

더 복잡한 시나리오에서도 동일한 기술을 사용할 수 있습니다.

버튼에 인라인 스타일이 있는 Javascript 객체를 설정하여 색상을 동적으로 변경할 수 있습니다.예를 들어 다음과 같습니다.

const normalButtonStyle = {
  background:'gray',
  color:'black',
  borderColor:'white'
}
const buttonCompleteStyle = {
  background:'red',
  color:'white',
  borderColor:'black'
} // this can be included in from another file as a style object as well

const MyButton = ({children, status, onClick, classNames, ...rest }) =>
(
  <button
    onClick   = {onClick}
    className = {`${classNames}`}
    {...rest}
    style={status === 'complete' ? buttonCompleteStyle : normalButtonStyle}
  >
    {children}
  </button>
);

테스트는 안 했지만, 뭐 그런 셈이죠.머티리얼 UI가 어떻게 기능하는지 살펴보십시오.

언급URL : https://stackoverflow.com/questions/38699039/setting-complex-react-inline-styles-such-as-hover-active-on-react-components-su