# Using Mixins to Inject Styles

Sometimes, such as when using 3rd party tools that don't allow us to control the HTML markup, we can use mixins to attach the same CSS styling to a different CSS class.

For example, you may have some Bootstrap styling that outputs a form input:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
    />
    <small id="emailHelp" class="form-text text-muted"
      >We'll never share your email with anyone else.</small
    >
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

To apply Skyline styling to the input, you could put something like this into an scss file ^[1].

// You'll need to have this imported somewhere in your code
// In Vue components it should be done within a `scoped` component.
// In other stacks you may want have this imported globally already.
@import '~@skyline/scss/src/core/UI.required';

input.form-control {
  @include skyline-base-inputs;
  // You may also need to write some CSS to 'undo' some styles that the other
  // framework is providing and Skyline is not controlling, as Skyline is not
  // aware that those exist.
}