如何在使用表单时解决Bootstrap和Clarity样式冲突

<!-- Bootstrap form -->
<div class="bootstrap-form">
  <form>
    <!-- Form elements here -->
  </form>
</div>

<!-- Clarity form -->
<div class="clarity-form">
  <form>
    <!-- Form elements here -->
  </form>
</div>

.bootstrap-form .form-control {
  /* Bootstrap specific styles */
}

.clarity-form .form-control {
  /* Clarity specific styles */
}

// Bootstrap styles
.bootstrap-form {
  @import '~bootstrap/scss/bootstrap';
}

// Clarity styles
.clarity-form {
  @import '~@clr/ui/clr-ui.min.css';
}

/* Override Bootstrap's default button style */
.btn-bootstrap {
  background-color: #007bff !important;
}

/* Override Clarity's default button style */
.btn-clarity {
  background-color: #6200ea !important;
}

function loadStyles(url) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
}

loadStyles('path/to/bootstrap.css');
loadStyles('path/to/clarity.css');