带有 Django 框架的 MUI答案

【问题标题】：MUI with django framework带有 Django 框架的 MUI
【发布时间】：2023-01-10 13:13:54
【问题描述】：

是否可以将 mui 与 django 框架一起使用？我想使用 django 将它保留在服务器端。我知道通常 mui 是通过使用反应库与客户端渲染一起构建的。我确实在 muicss.com 中找到了一个 cdn 库，但恐怕这个库已经过时了。我想使用当前版本 5.0 及其所有类/组件。有任何想法吗？

【问题讨论】：

标签： django material-ui server-side

【解决方案1】：

有一个 MUI 的官方 CDN 版本，它可以帮助您使用服务器端渲染构建 HTML Web 组件。

您可以通过将 CSS 和 JS“CDN 版本”添加到常规 HTML 模板中来从中受益，例如下面的“home.html”，然后使用 Django 视图呈现它；您肯定可以传递上下文变量，以及 Django 在呈现模板时可以提供的所有内容。

示例home.html：

!-- Required styles for Material Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<h1>Hello {{ dummy_context }}</h1> <!-- Render Django Context -->
<!-- Render textfield component -->
<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label">Label</span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-line-ripple"></span>
</label>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!-- Instantiate single textfield component rendered in the document -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

views.py:

from django.views.generic.base import TemplateView

class HomePageView(TemplateView):

    template_name = "home.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['dummy_context'] = "This is a dummy context"
        return context

urls.py:

from django.urls import path

from myapp.views import HomePageView

urlpatterns = [
    path('', HomePageView.as_view(), name='home'),
]

Github repo 中有可用 MUI 包/组件的完整列表。

【讨论】：