小编Sam*_*ore的帖子

我第一次探索 Compose + Material 3，在尝试实现自定义颜色时遇到了很大的困难。

我的意思是根据 Compose 之前的工作方式执行以下操作：

我有我的自定义属性attrs.xml

<?xml version="1.0" encoding="UTF-8"?>\n<resources>\n    <declare-styleable name="CustomStyle">\n        <attr name="myCustomColor"\n            format="reference|color"/>\n    </declare-styleable>\n</resources>\n

并且该自定义属性可以在我的光明和黑暗中使用styles.xml

<?xml version="1.0" encoding="utf-8"?>\n<resources xmlns:tools="http://schemas.android.com/tools">\n    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">\n        <item name="myCustomColor">@color/white</item> <!-- @color/black in the dark style config -->\n    </style>\n</resources>\n

然后我可以在任何我想要的地方使用它，无论是在代码中还是在布局中：

<com.google.android.material.imageview.ShapeableImageView\n    android:layout_width="24dp"\n    android:layout_height="24dp"\n    android:background="?myCustomColor"\n

这非常简单实用，因为它会自动解析浅色和深色，而我所需要的只是使用自定义颜色参考。

但在 Compose with Material 3 中我找不到任何地方解释如何完成这样的事情。

在材质 2 中，可以执行以下操作：

val Colors.myExtraColor: Color\n    get() = if (isLight) Color.Red else Color.Green\n

但在材料 3 中这不再可能：

长期从事 C# 开发，刚刚为客户启动 nextjs。

我用的是MUI，基本上一天的工作时间都在，所以我的项目很小。我对 SSR 在概念上的工作原理有很好的了解，但实现却让我陷入了一个奇怪的循环。

这是我的layout.js：

<!-- language:javascript -->
import "./globals.css";
import {
  Drawer,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  List,
  AppBar,
  Toolbar,
  Typography,
  Box,
} from "@mui/material";
import AssessmentIcon from "@mui/icons-material/Assessment";
import AddIcon from "@mui/icons-material/Add";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import zIndex from "@mui/material/styles/zIndex";
import { theme } from "./theme";
import { ThemeProvider } from "@mui/material/styles";

const navItems = [
  { name: "Create New", icon: <AddIcon />, url: "todo" },
  { name: "View all", icon: <FormatListBulletedIcon />, url: "todo" },
  { …