css如何在Vue或React项目中引入样式

{`function MyComponent() {
  const style = { color: 'blue', fontSize: '16px' };
  return <div style={style}>Hello</div>;
}`}

<template>
  <div :style="{ color: 'blue', fontSize: '16px' }">Hello</div>
</template>

<template>
  <div class="box">内容</div>
</template>

<script>
export default { name: 'MyBox' }
</script>

<style>
.box { padding: 20px; background: #f0f0f0; }
</style>

import './MyComponent.css';

function MyComponent() {
  return <div className="title">标题</div>;
}

<style>
@import './styles/common.css';
</style>

.title {
  font-size: 20px;
  color: green;
}

import styles from './MyComponent.module.css';

function MyComponent() {
  return <h1 className={styles.title}>Hello</h1>;
}

<style module>
.title { color: green; }
</style>

<template>
  <h1 :class="$style.title">标题</h1>
</template>

<style lang="scss">
.container {
  $primary-color: #42b983;
  color: $primary-color;
  .text { font-weight: bold; }
}
</style>

import './App.scss';