# textField.style(\_:)

{% tabs %}
{% tab title="💾 程式" %}

```swift
// 🌀 TextField + .style()
extension TextField {
    public func style<S>(_ style: S) -> some View where S: TextFieldStyle {
        textFieldStyle(style)
    }
}

// content view
struct ContentView: View {
    @State private var text = "hello"
    var body: some View {
        VStack {
            TextField("hello", text: $text)
                // ⭐️ TextField 可使用 custom method，使語意更簡潔
                .style(.plain)
            TextField("hello", text: $text)
        }
        // ⭐️ parent view 使用 .textFieldStyle() 才不會失去 contextim
        .textFieldStyle(.roundedBorder)
    }
}
```

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FDBAURPMCf41TILK3XbgY%2Ftextfieldstyle.png?alt=media\&token=30c9b0fc-c910-4e68-a831-ae3def518a6a)
{% endtab %}

{% tab title="📗 參考" %}

* [ ] [Encapsulating SwiftUI view styles](https://www.swiftbysundell.com/articles/encapsulating-swiftui-view-styles/) - Sundell
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls) ⟩ [TextField](https://developer.apple.com/documentation/swiftui/textfield) ⟩&#x20;
  * [TextFieldStyle](https://developer.apple.com/documentation/swiftui/textfieldstyle)<br>
    {% endtab %}

{% tab title="👥  相關 " %}

* [🌅 對齊欄位](https://lochiwei.gitbook.io/ios/swiftui/data-flow/preferences/examples/same-width)
* [🎛️ TextField](https://lochiwei.gitbook.io/ios/swiftui/control/textfield)
  {% endtab %}
  {% endtabs %}