Я пытаюсь установить встроенные стили в моем приложении реагируют. В этом случае, на период:
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
Реагировать мне говорит:
непойманные инвариант нарушение: "стиль" опора предполагает сопоставление Свойства тип значения, а не строку. Например, и GT; стиль={{marginRight: интервал + 'Они'}} при использовании JSX. Это DOM-узел оказал `SentenceView
Я не совсем уверен, что это означает.
ЗЫ: я пробовал разные версии, поэтому я сделал paddingRight: 5, а также
paddingRight: 5 + 'РХ'а также
paddingRight : 5 пикселей, но я не'т иметь никакого успеха!
Использование и"стиль<удар>с</удара>" и опору, а не стиль
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
Есть несколько способов, чтобы задать стиль для компонентов реакции.
https://facebook.github.io/react/docs/context.html
https://github.com/facebookincubator/create-react-app
используя имя_класса="по-вашему-класса-именем"
используя стиль={css_object}
или стиль={{Color: это.реквизит.цвет}}
стилей.Усс
в
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";
}
в
Объект # стиль# 2
в
// <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>
)
}
}
В HTML это
`в HTML
в <div стиль=то"фон-цвет: красный; и"></див>
В JSX вы пишите
jsx
в <div стиль={{ фон: 'красный' }}></див>
``
Условное форматирование встроенной отличаются в обоих.