bulma を一部にのみ適用する

bulma を一部にのみ適用する。

言い換えると、bulma を特定の要素以下に限定して適用する。

apply-bulma クラスの下のみが bulma の影響を受ける。 bulma/sass/base/generic.sass や bulma/sass/base/minireset.sass には html や body へのスタイルが定義されているが、親コンポーネントやその他がそれを避けたいような需要に応えられる。

/* App.scss */

.apply-bulma {
  @import "bulma";
}

// App.tsx

import App.scss;

const App: React.FC = () => {
  return (
    <div>
      <div class="apply-bulma">
        <button class="button">button 1 (applied bulma)</button>
      </div>
      <div>
        <button class="button">button 2 (not applied bulma)</button>
      </div>
    </div>
  );
}