내가 노력하고 있을 설정하는 인라인 스타일에 반응하는 응용 프로그램. 이 경우,범위:
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
반응하는 나에게 말:
catch 되지 않는 고정 위반:
스타일
prop 기대에서 매핑 스타일의 속성 값을 문자열이 아닙니다. 예를 들어, style={{marginRight:간격+'em'}}사용하는 경우 JSX. 이 노드 DOM 렌더링 되었`SentenceView
는 것은 그것이 의미하는 것입니다.
PS:가 다른 버전이,그래서 나는paddingRight:5
뿐만 아니라paddingRight:5+'px'
뿐만 아니라paddingRight:5px
,그러나지 않았't 어떤 성공!
거기에 몇 가지 방법을 설정한 스타일의 반응에 대한 구성 요소입니다.
https://facebook.github.io/react/docs/context.html
https://github.com/facebookincubator/create-react-app
를 사용하여className="당신의 클래스 이름"
를 사용하여style={css_object}
또는style={{color:다.props.색상}}
시오.css
import './styles.css';
/*
.classname-color{
color: "red";
background: "#0f0";
}
*/
const BTN = (props) => {
return (
<div>
My name is <button>{props.name}</button>
<hr/>
I'm <span className="classname-color">{props.age}</span> yeas old!
</div>
);
};
const infos = {
name: "xgqfrms",
age: 23
};
ReactDOM.render(<BTN {...infos} />, mountNode);
.classname-color{
color: "red";
background: "#0f0";
}
// <span style={styles}>
const styles = {
color: "red",
background: "#0f0",
fontSize: "32px"
};
const BTN = (props) => {
return (
<div>
My name is <button>{props.name}</button>
<hr/>
I'm <span style={styles}>{props.age}</span> yeas old!
</div>
);
};
const infos = {
name: "xgqfrms",
age: 23
};
ReactDOM.render(<BTN {...infos} />, mountNode);
// <span style={{color: styles.color}}>
const styles = {
color: "red",
background: "#0f0",
fontSize: "32px"
};
const BTN = (props) => {
return (
<div>
My name is <button>{props.name}</button>
<hr/>
I'm <span style={{color: styles.color}}>{props.age}</span> yeas old!
</div>
);
};
const infos = {
name: "xgqfrms",
age: 23
};
ReactDOM.render(<BTN {...infos} />, mountNode);
이 방법은 어떻게 정의할 수 있고 사용하는 인라인 스타일과 반응합니다.
/**
* Style definitions.
*/
const STYLE = {
infoColor: {
color: 'green'
},
warningColor: {
color: 'orange'
},
errorColor: {
color: 'red'
}
};
/**
* Component
*/
class Welcome extends React.Component {
/**
* Rendering into the DOM.
*/
render() {
return (
<div>
<h2 style={STYLE.infoColor}>Welcome!</h2>
)
}
}