Android cannot resolve Material Components : <p>I am getting this error:</p>

<blockquote>
  <p>Cannot resolve symbol
  '@style/Widget.MaterialComponents.TextInputLayout.OutlineBox'</p>
</blockquote>

<p>I am getting this error after I added this line to my TextInputLayout in my XML:</p>

<pre><code>style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox" 
</code></pre>

<p>This is my full XML code(removed unrelevant constraints/margins):</p>

<pre><code>&lt;android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout2"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:counterEnabled="true"
    app:counterMaxLength="300"&gt;

    &lt;android.support.design.widget.TextInputEditText
        android:id="@+id/cheese_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:hint="@string/cheese_description" /&gt;

&lt;/android.support.design.widget.TextInputLayout&gt;
</code></pre>

<p>this is my app <strong>build.gradle</strong>:</p>

<pre><code>    apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "app.cheese.cheese.some.sample_cheese"
        minSdkVersion 19
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    buildToolsVersion '27.0.3'
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.google.firebase:firebase-auth:11.8.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    compile 'com.android.support:design:27.0.2'
    compile 'com.google.firebase:firebase-core:11.8.0'
    implementation 'com.android.support:appcompat-v7:27.0.2'
    compile 'com.android.support:support-v4:27.0.2'
    compile 'com.google.firebase:firebase-storage:11.8.0'
    compile 'com.google.firebase:firebase-messaging:11.8.0'
    compile 'com.firebaseui:firebase-ui-auth:3.1.3'
    compile 'com.google.firebase:firebase-database:11.8.0'
    implementation 'com.android.support:cardview-v7:27.0.2'
    implementation 'com.android.support:recyclerview-v7:27.0.2'
    implementation 'com.firebaseui:firebase-ui-database:3.2.1'
}

apply plugin: 'com.google.gms.google-services'
</code></pre>

<p>and this is my other <strong>build.gradle</strong>:</p>

<pre><code>// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
        classpath 'com.google.gms:google-services:3.1.1'


        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
</code></pre>

<p>I tried:</p>

<ul>
<li>changing buildToolsVersions from "27.0.3" to "27.0.2" and sync</li>
<li>Invalidate Caches/ Restart</li>
<li>Rebuild Project</li>
</ul>

<p>I took the XML line of code that causes error <a href="https://material.io/components/android/catalog/text-input-layout/" rel="noreferrer">from the material.io components here</a>. does anyone know what I am doing wrong?</p>

<p>Thank you :)</p>
