Как использовать css внутри компонентов react js

Примеры кода

Стиль Реагирует с помощью CSS

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

inline css-стиль jsx

// Best option (in my opinion) is to make a style object, similar to a CSS class
// This is especially useful when you want to use the style across multiple elements
// Another plus is being able to make a lot of these styles in a util file, and import as needed
// Keep in mind the CSS props need to be camel-cased

const box = {
  textAlign: 'center',
  borderStyle: 'double'
};
const text = {
  color: '#ff0000',
  backgroundColor: '#888888'
};

renderBox() {
  	return (
    	<div style={box}> <p style={text}>
      		This is just a box, no need to worry.
        </p> </div>
  	);
}

// The reason I prefer the above is readability and not as much duplication.
// Alternatively, you can hard-code the styling.
// Just remember, you're passing an object as the style prop.
// So, first curlies are to say "hey, this is JS, not html"
// Second curlies are to say "hey, this is an object"

renderBox() {
	return (
    	<div style={{textAlign:'center', borderStyle:'double'}}>
      		<p style={{color:'#ff0000', backgroundColor:'#888888'}}>
              	This is just a box, no need to worry.
            </p>
		</div>
	);
}

..................................................................................................................

Referencia

Slovenský

..................................................................................................................

Odkaz

Балгарскі

..................................................................................................................

Спасылка

Íslensk

..................................................................................................................

Link

Как использовать css внутри компонентов react js

Примеры кода

Стиль Реагирует с помощью CSS

inline css-стиль jsx

Похожие страницы

Похожие страницы с примерами

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные страницы с примерами в категории