title: Angular Material Overriding Default Style of SnackBar Component
body: <p>I am attempting to override the default max-width of the <a href="https://material.angular.io/components/snack-bar/overview" rel="noreferrer">snackbar</a> component in Angular Material.</p>
  
  <p>The CSS applied by Angular Material is shown below:</p>
  
  <pre><code>.mat-snack-bar-container {
      border-radius: 2px;
      box-sizing: border-box;
      display: block;
      margin: 24px;
      max-width: 568px;
      min-width: 288px;
      padding: 14px 24px;
      transform: translateY(100%) translateY(24px);
  }
  </code></pre>
  
  <p>I have tried overriding using the same style in my style.css file but this style is overridden by the default style. </p>
  
  <pre><code> .mat-snack-bar-container {
     max-width: 800px;
   }
  </code></pre>
  
  <p>I have found an answer to a <a href="https://stackoverflow.com/a/44134755/4912604">similar question</a> but I know the answer to that question is now deprecated (/deep/ is deprecated). </p>
  
  <p>Is there a best practices solution to this?</p>