我目前使用默认的vite + react应用程序，并按照他们的文档所述安装了引导程序
https://getbootstrap.com/docs/5.2/getting-started/vite/

• • 邀请配置ts**

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    },
  },
});

• • 索引. scss**

// Import all of Bootstrap's CSS
@import '~bootstrap/scss/bootstrap';

• • 主文件. tsx**

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.scss';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

• • 应用程序tsx**

import React from 'react';
import logo from '../assets/logo.png';
import './app.css';

const App = () => {
  return (
    <div className="div-app_x container">
      <img
        src={logo}
        alt="Logo"
        className="logo_x col-sm-5 offset-sm-5"
      />
      <p className="center-text_x">
        Sign <br /> in
      </p>
    </div>
  );
};

export default App;

• • 应用程序. css**

.div-app_x {
  width: 450px;
  height: 600px;
  background-color: white;
  border: 5px solid black;
  margin-top: 100px;
  box-shadow: 5px 5px 8px 1px rgba(255, 255, 255, 0.7);
}

.logo_x {
  width: 18%;
  margin-top: 50px;
}

.center-text_x {
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}

但是我自己的CSS被覆盖了。我应该如何解决这个问题？（* logo * 是被覆盖的许多类元素之一。）