버튼과 같은 반응 구성요소에서 활성, 호버와 같은 복합 반응 인라인 스타일 설정
제 단추는 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
/require
CSS를 오브젝트로서 다음과 같이 컴포넌트를 사용합니다.
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 모듈과classnames
lib를 사용하여 강력한 조합을 만듭니다.
개인적으로는 글로벌 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
'programing' 카테고리의 다른 글
jQuery Ajax가 iOS에서 작동하지 않음(list.js 포함) (0) | 2023.03.28 |
---|---|
Oracle (+) 연산자 (0) | 2023.03.28 |
json: 개체를 형식의 Go 값으로 마킹 해제할 수 없습니다. (0) | 2023.03.28 |
워드프레스: 추가워드프레스: 추가 (0) | 2023.03.28 |
타이프스크립트의 json Response에서 날짜 개체를 가져오는 방법 (0) | 2023.03.28 |