title: SwiftUI - How to remove white background behind List that is styled with SidebarListStyle, in portrait mode
body: <p>I have a list styled with <a href="https://developer.apple.com/documentation/swiftui/sidebarliststyle" rel="nofollow noreferrer"><code>SidebarListStyle</code></a> (new in iOS 14) inside a <code>NavigationView</code>.</p>
  <pre><code>struct ContentView: View {
      let data = [&quot;One&quot;, &quot;Two&quot;, &quot;Three&quot;, &quot;Four&quot;, &quot;Five&quot;, &quot;Six&quot;, &quot;Seven&quot;, &quot;Eight&quot;, &quot;Nine&quot;, &quot;Ten&quot;, &quot;Eleven&quot;, &quot;Twelve&quot;, &quot;Thirteen&quot;, &quot;Fourteen&quot;]
      
      var body: some View {
          NavigationView {
              List {
                  Section(header: Text(&quot;Section&quot;)) {
                      ForEach(data, id: \.self) { word in
                          Text(word)
                      }
                  }
              }
              .listStyle(SidebarListStyle())
              .navigationBarTitle(Text(&quot;Title&quot;), displayMode: .large)
          }
      }
  }
  </code></pre>
  <p>The problem is that there is a white rectangle behind each of the rows in the list, but only in portrait mode. It's fine in landscape.</p>
  <p><img src="https://i.stack.imgur.com/Y6cnH.png" width="200"> <img src="https://i.stack.imgur.com/erh1J.png" height="200"></p>
  <p>I don't want that white background, anyone know <strong>how to remove it</strong>? Also, when launching the app, it seems to glitch -- at first it's fine, then it adds the white background.</p>
  <img src="https://drive.google.com/uc?id=1WtwvN1Wy8AH-pR5ibfzjNxBrKJr6R2mW" width="200">
  <p>Weirdly, if I add <code>.navigationViewStyle(StackNavigationViewStyle())</code> to the <code>NavigationView</code>, the white background disappears and it launches fine.</p>
  <pre><code>struct ContentView: View {
      let data = [&quot;One&quot;, &quot;Two&quot;, &quot;Three&quot;, &quot;Four&quot;, &quot;Five&quot;, &quot;Six&quot;, &quot;Seven&quot;, &quot;Eight&quot;, &quot;Nine&quot;, &quot;Ten&quot;, &quot;Eleven&quot;, &quot;Twelve&quot;, &quot;Thirteen&quot;, &quot;Fourteen&quot;]
      
      var body: some View {
          NavigationView {
              List {
                  Section(header: Text(&quot;Section&quot;)) {
                      ForEach(data, id: \.self) { word in
                          Text(word)
                      }
                  }
              }
              .listStyle(SidebarListStyle())
              .navigationBarTitle(Text(&quot;Title&quot;), displayMode: .large)
          }
          .navigationViewStyle(StackNavigationViewStyle())
      }
  }
  </code></pre>
  <p>Left: How it launches, right: How it looks after launching</p>
  <p><img src="https://drive.google.com/uc?id=11T8SgEgEsTyh4uyTe8J7WwqwbKLQ52_h" width="200"> <img src="https://i.stack.imgur.com/tdZmh.png" width="200"></p>
  <h3>↑ This is how I want it to be.</h3>
  <p>However, now the landscape mode is limited to a full-width list, which I don't want either.</p>
  <img src="https://i.stack.imgur.com/KNFmG.png" height="200">
  <h3>Edit: <a href="https://stackoverflow.com/users/13899957/omid">@Omid</a>'s answer</h3>
  <p>I added a background color to match the default one:</p>
  <pre><code>Text(word)
  .listRowBackground(Color(UIColor.systemGroupedBackground))
  </code></pre>
  <p>But the launching glitch is still there.</p>
  <img src="https://drive.google.com/uc?id=1hr4PC4QM7KHgCM0_aMa-6xC7EQzPwvQv" width="200">
  <h3>Edit: <a href="https://stackoverflow.com/users/8697793/pawello2222">@pawello2222</a>'s answer</h3>
  <p>Works alright, just a weird transition when rotating.</p>
  <img src="https://i.stack.imgur.com/UAWm9.gif" width="200">