Material-UI theme.mixins.toolbar不使用Typescript
Material-UI是一个流行的React组件库，它提供了丰富的UI组件和样式，以帮助开发者快速构建现代化的Web应用程序。其中的theme.mixins.toolbar是Material-UI的一个内置样式混合器（mixin），用于定义应用程序的工具栏（toolbar）的样式。
- 概念：Material-UI的theme.mixins.toolbar是一个样式混合器，它提供了一系列用于定义工具栏样式的CSS属性和值。
- 分类：theme.mixins.toolbar属于Material-UI的主题（theme）样式部分。
- 优势：使用Material-UI的theme.mixins.toolbar可以快速定义和应用一致的工具栏样式，减少样式编写的工作量，并确保工具栏在不同设备上有良好的显示效果。
- 应用场景：theme.mixins.toolbar适用于任何需要工具栏的Web应用程序，如管理后台、博客、电子商务平台等。
- 推荐的腾讯云相关产品： 腾讯云提供了丰富的云计算服务和解决方案，以下是一些推荐的产品和链接地址：
注意：以上推荐的腾讯云产品仅供参考，具体选择应根据项目需求和实际情况进行决策。
相关·内容
我有以下测试代码(遵循Material UI typescript文档中的指南)
import * as React from 'react';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import { WithStyles } from '@material-ui/core';
import { createStyles } from '@material-ui/core/styles';
import Drawer from '
浏览 0提问于2018-06-21得票数 2
我在material-ui文档中找不到任何有关...theme.mixins.toolbar的文档。这是做什么的？如何更改或使用它？
浏览 0提问于2018-10-26得票数 19
我正在使用Material-UI来创建一个React & Typescript网站。到目前为止，它工作得很好，但我有一个非常具体的问题。我正在尝试使用其中一个代码示例，但它似乎不适用于Typescript： https://material-ui.com/components/app-bar/#fixed-placement 具体来说： const useStyles = makeStyles(theme => ({
offset: theme.mixins.toolbar,
})); 生成以下错误： (property) Mixins.toolbar: React.C
浏览 15提问于2020-02-01得票数 0
回答已采纳
1回答
我正在使用material-ui themeProvider，并尝试访问样式中默认主题的所有高度值： makeStyles(theme => createStyles({
...
marginTop: -theme.mixins.toolbar.minHeight, // works
[`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {
marginTop: -theme.mixins.toolbar.@media___????.minHeight },
[theme.brea
浏览 12提问于2020-11-10得票数 0
我正在寻找一种干净的方法来调整Material-UI AppBar后面的内容偏移量。
我假设theme.mixins.toolbar会自动适应，但事实并非如此。
(使用这里描述的主题密度属性=> 也不起作用)
export default props => {
const classes = useStyles();
return (
<>
<AppBar position="fixed" >
<Toolbar variant="dense
浏览 0提问于2020-03-07得票数 5
请帮帮我，我正在尝试使用material-UI的按钮。但是当我实现的时候得到了很多很多的错误。Java脚本版本是版本4.1.3 npm版本是版本6.14.10 通过使用以下命令installed material UI npm install @material-ui/core Ui.tsx文件 import * as React from 'react';
import styles from './Ui.module.scss';
import { IUiProps } from './IUiProps';
import { escape
浏览 41提问于2021-01-27得票数 1
我刚接触React和Material UI，我一直在努力尝试将我现在拥有的Mini Variant抽屉与响应式抽屉连接起来，所以当你在手机上使用它时，它会变成响应式抽屉。如果有人能帮助我，这对我来说意义重大，我试过了，但我总是失败。这也将帮助我获得与抽屉进一步联系的知识。
下面是我在Mini Variant that中使用的代码：
import React, {useState} from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/sty
浏览 19提问于2021-09-06得票数 0
我正在尝试将dahsboard的组件拆分成更小的组件。但是，所有组件都依赖于drawerWidth。我的第一个想法是让drawerWidth进入状态，这样我就可以将它向下传递到每个组件中。但是，变量样式取决于drawerWidth。在学习material-ui文档和参考项目时，样式总是在类之外。 我尝试在类中移动这两个变量，并通过类的引用将函数传递给withStyle，但也失败了。页面的css关闭了，我收到一个警告，说我向withStyles传递了一个无效的函数。它看起来像下面这样。 export default withStyles(DashboardLayout.styles)(Dash
浏览 21提问于2019-02-23得票数 2
回答已采纳
问题1； 你好，我正在使用typescript和VSCode，我安装了伟大的软件包“@material-ui/core”和“@ export”，它们都是这样导出“样式”的。 import { styled } from '@material-ui/core'
import styled from '@emotion/styled/types/base' 图片:从@material-ui/core导出样式 ? 图片:从@emotion中导出样式 ? 我想隐藏“@material-ui/core”中"styled“的建议，保留”@emotion“。
浏览 24提问于2020-12-09得票数 0
1回答
我试图定制由Material提供的默认主题，但是样式不适用。请帮帮忙。
在中，当我试图自定义样式时，Header.js文件将不会被应用。
const useStyles = makeStyles((theme) => ({
toolbarMargin: {
...theme.mixins.toolbar,
marginBottom: '3em',
},
logo: {
height: '7em',
},
tabContainer: {
marginLeft: 'auto',
},
浏览 2提问于2021-02-08得票数 0
回答已采纳
2回答
我们为material-ui@next创建了类型，并希望将它们与库一起发送，这是我们在上一个测试版中所做的。
下面是指向的链接。
但是，这些类型在当前的形式中是不可用的。在开发中，它们在本地使用并且工作良好，但是当将文件与库一起传送时，TypeScript似乎使用了不同的发现策略。
引用子文件夹(例如declare 'material-ui/Button/Button')的所有类型都不会是TypeScript。当导入组件时，会出现一个错误：
[ts]
Could not find a declaration file for module 'material-ui/Bu
浏览 4提问于2017-08-21得票数 4
回答已采纳
我正在开发一个react typescript应用程序，我尝试从‘@material-ui/ makeStyles / Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'.’导入样式，结果得到错误信息，我安装了以下内容： npm install @material-ui/core @material-ui/icons @types/material-ui
浏览 54提问于2021-06-29得票数 9
我有一个，更大的组件，有几个状态和道具。此组件负责报头和侧栏。(将菜单向左移动)。所以我想把它分成两个文件，但是我做得不好。
这个组件有const抽屉，这正是我想要移到另一个文件(连同状态和所有样式)--这是我的一个更大的组件：
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import Drawer from '@ma
浏览 1提问于2018-10-03得票数 1
获取JSX element type 'Route' does not have any construct or call signatures，同时尝试使用TypeScript跟踪本演练。
我的代码：
const Routes = (
<Route path="/" handler={Main}>
<IndexRoute handler={ConnectionModule} />
</Route>
);
导致TypeScript编译器使用上述错误消息抱怨路由和IndexRount导入。
以下是我的导入语句(
浏览 3提问于2016-08-16得票数 2
在刚刚下载、安装并运行create-react-app- with -typescript之后，我一直在尝试各种组件。当我使用以下几行代码添加一个带有hintText的TextField时：
import TextField from 'material-ui/TextField';
和
<TextField hintText="Hint Text"/><br />
<Typography variant="display1" gutterBottom>
Material-UI
</T
浏览 0提问于2018-03-20得票数 0
我正在将Material (v4.4.3)集成到React (v16.9.2) TypeScript (v3.6.3)网站中。使用示例AppBar组件示例和TypeScript指南，我有以下功能组件。
但是，我在这一行中得到了useStyles()的TS错误
const classes = useStyles();
(TS)：期望一个参数，但得到0。
import * as React from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
浏览 9提问于2019-09-24得票数 3
6回答
我正在使用React Material UI (文档)中的responsive抽屉
我正在试着改变它，使抽屉的高度始终保持为100%。为此，我尝试更改根类的高度，当前设置为430。但是，当我将其设置为百分比时，它只会默认为可能的最小高度。
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
浏览 4提问于2017-11-28得票数 7
我正在尝试进行一个异步API调用，它将返回adminId。我希望使用返回的值进行第二个API调用，该调用返回客户信息。
从下面的代码中，为了测试目的，我以字符串的形式输入const adminId，但是如果要删除它，如何将values[0].data.user[0].adminId传递给第二个URL参数？
import React, { useState, useContext, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import CssB
浏览 2提问于2020-06-08得票数 0
回答已采纳
我是新手，从构建应用程序开始，我在安装依赖项时遇到了一个问题。我想包括像material-ui/core，material-ui/icons，react-reveal，react-scroll和react-slick这样的软件包。
在使用此命令进行安装时：
npm install @material-ui/core @material-ui/icons react-reveal react-scroll react-slick
它显示它们已经安装，而当我开始编写代码时，它没有编译它。
这时我想出了一个错误：
npm警告@typescript-eslint/eslint@1.6.0需要一个对等
浏览 0提问于2019-07-05得票数 18
我对Material-UI并不陌生，尽管我对Electron和使用React，Typescript，Material-UI是个新手。 当我试图为自己制作一个电子样板代码，以便以后轻松地开始一个项目时，我就遇到了这个错误。当我安装一个又一个依赖项并使用它们时，我没有遇到任何问题-- Material-UI在我第一次将其安装到项目并创建样板代码时没有任何问题。当我得到了我想要的基础文件的所有内容时，我删除了.cache、dist、parcel-dist和node_modules文件夹，以减小样板文件的大小，以便稍后使用。 当我以后尝试复制和重用它时，我得到了错误： [electron] node
浏览 59提问于2021-09-16得票数 1
获取typescript错误将className应用于Box元素；奇怪的是，相同的源代码可以在具有几乎相同配置的其他开发人员的Box上工作。
使用："@material-ui/core"："4.11.3"，"typescript"："4.1.5“
tsc --版本4.1.5
/src/components/NoSearchResultsOverlay/NoSearchResultsOverlay.tsx
TypeScript error in .../client-app/src/components/NoSearchResultsOve
浏览 23提问于2021-05-19得票数 0
我使用的是MaterialUI。我的仪表板上有一个卡片列表。My Dash是一个扩展React.Component的类。我的卡片是一个使用钩子useState的函数。我的仪表盘是使用.map()来构建卡片列表。我的卡片有“显示数据”的功能。
Dashboard.js
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import
浏览 14提问于2019-11-17得票数 0
我正在用TypeScript替换一个使用React和JS创建的应用程序，使用ts migrate，但是在App.tsx文件中发生了以下错误。
Line 0: Parsing error: Cannot read property 'map' of undefined
下面是App.tsx
import React, { useState, useEffect, useCallback} from 'react';
import './assets/styles/style.css';
import {AnswersList, Chats} fro
浏览 3提问于2020-12-06得票数 2
2回答
我正在尝试将CloseIcon与flex-end对齐，这样它就能正确地浮动，但无法找到应用该样式的位置。
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List
浏览 5提问于2020-07-13得票数 1
回答已采纳
1回答
如何设置material-ui对话框或模式的透明深色覆盖的样式？我使用material-ui/React/Typescript。 ? 我希望它是透明的白色，而不是透明的深色。我更喜欢JSS解决方案，但是内联风格是受欢迎的。
浏览 16提问于2019-03-21得票数 7
回答已采纳
1回答
我正在尝试连接反应材料UI:持久+响应式抽屉，这样移动将是响应式抽屉，上面的移动将是持久的。
我找到了一个几乎可以正常工作的代码，但是我没有第二个按钮来切换持久性。
有人能帮我添加吗，因为我正在尝试添加它？
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
浏览 1提问于2019-01-07得票数 3
尝试有条件地呈现组件。我有一个drawHelper变量&一个函数来切换它的真假。组件根据drawHelper的初始值呈现或不呈现。(假的，不呈现的，真的)。
切换函数更改该值。我使用console.log(drawHelper)进行了检查，但更改该值并不会使组件出现或消失。
我是不是漏掉了什么？
import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBasel
浏览 2提问于2021-04-03得票数 0
我正在创建一个使用资料用户界面的网络应用程序。主页被划分为3个网格，每个网格都有一个height of 500px。我想在中间网格中展示一个抽屉，里面有一些操作选项。这有可能吗？到目前为止，我只能在整个屏幕上显示它。
下面是包含网格元素的主要组件：
import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
const style = {
P
浏览 0提问于2019-09-01得票数 7
回答已采纳
我想在我的React应用程序中使用Snackbar 组件。为了记录在案，我的应用程序是用TypeScript编写的。
当试图导入组件时，我遇到了问题。进口线上写着：
导入声明与“Snackbar”..ts的本地声明冲突(2440)
然后在呈现方法中，当我尝试使用它时，IDE说：
“‘Snackbar”指的是值，但在这里用作类型。你的意思是“快餐店”(2749)。
在耍我吗？(我工作的一位朋友尝试了相同的代码，结果成功了。)
我尝试使用的代码是。
这是我的设计：
System:
OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beav
浏览 5提问于2021-03-23得票数 1
我在玩材料UI抽屉组件，我希望抽屉在应用程序栏下面，我想点击汉堡包图标的按钮来打开和关闭，当我点击汉堡包图标时，它应该打开下面的抽屉，它也应该关闭，我不想让汉堡包图标移动，它应该是静态的，在一个place.it中不移动，只有抽屉应该打开，move.how可以在材质ui 中实现它。
import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from
浏览 4提问于2021-04-01得票数 5
回答已采纳
我有以下javascript代码，。
import Button from "@material-ui/core/Button";
const RegularButton = React.forwardRef((props, ref) => {
return (
<Button {...rest} ref={ref} className={btnClasses}>
{children}
</Button>
);
}
如何使用typescript扩
浏览 3提问于2020-08-09得票数 0
我想使用material-ui，使用react和typescript。我想把属性传递给组件，但是不知道怎么做。我使用material-UI代码库中的react-typescript示例。我尝试的内容如下：
添加一个属性接口：
const styles = (theme: Theme) =>
createStyles({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20,
},
});
interface IndexProps
extends
浏览 3提问于2018-08-24得票数 0
回答已采纳
1回答
我一直在遵循的指南，希望使用抽屉制作一个简单的组件。下面是官方文档中指定如何创建组件的代码。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from
浏览 3提问于2017-10-04得票数 0
回答已采纳
我需要使用一个可以通过CDN URL指向机制解析的包，请参阅，如下所示
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
然而，当我想在我的Typescript中使用上述包中的图标时，如下所示：
import MenuIcon from '@material-ui/icons/Menu';
它告诉我以下错误
Module not found: Can't resolve '@material-ui
浏览 4提问于2018-06-22得票数 1
我有一个基于mui-org/material-ui的组件库dot-components。我有另一个应用程序正在使用我的dot-components组件库，最近我注意到在我的单元测试中出现了一个控制台警告。 控制台警告 console.warn
Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead.
at css (../../node_modules/@material-ui/system/styleFunctionSx.js:75:13)
浏览 66提问于2021-08-17得票数 3
回答已采纳
我是TypeScript的新手，正在尝试遵循material-ui存储库中提供的示例。提供的示例代码正在传递root CSS类。我想通过‘`root’传递更多的CSS类。
const styles: StyleRulesCallback<'root'> = theme => ({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20,
}
});
这里是material-ui提供的完整示例代码的链接。
浏览 1提问于2018-02-14得票数 1
我有一个Visual Studio2019 (v16.3.2) React TypeScript项目，其中包括Material-UI组件。TypeScript编译器无法解析任何@material-ui导入，并且会发生如下错误，从而导致无法生成相应的JavaScript。 Error TS2307 (TS) Cannot find module '@material-ui/core/Grid'. 上面错误的模块是 import * as React from 'react';
// Material-UI
import Grid from '@m
浏览 40提问于2019-10-03得票数 12
1回答
我用路由完成了一个小任务，当我将/放在URL中时，它会将我重定向到登录页面，而当我将/dashboard重定向到具有重要UI持久抽屉的仪表板上时。但是我这样做是完全错误的，因为我在2个组件中使用了browserRouter，但理想情况下，它应该只在根组件中使用，因为这是我第一次单击抽屉中的某个链接时，它在仪表板中呈现该组件，但是当我刷新页面时，它没有加载任何东西，我没有看到一个示例，路由非常有组织，就像当我注册他们的URL是auth/signup时，他们的URL是auth/signup，仪表板的URL是dashboard/app，当我点击其他链接条目时，模式是相同的dashboard/link
浏览 3提问于2021-04-20得票数 2
回答已采纳
我的屏幕看起来像下面的截图：
AppBar始终位于抽屉和内容的上方；这是通过使用抽屉variant=“持久”来实现的。
但是文本内容不向左+向右移动，它总是固定不变的。我想让它移动，如屏幕截图所示。
代码如下：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
//NB: I'm using material-ui core/v3.9.3, and icons/v3.0.2
import AppBar from '@material-
浏览 2提问于2019-09-10得票数 3
回答已采纳
在浏览器上运行项目时出现了以下错误：
未能编译：
./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js
Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'.
我正在尝试实现 (来自“多值”部分中的示例)。
下面是我使用的代码：
import React from 'react';
import Chip from '@material-ui/co
浏览 6提问于2020-04-05得票数 12
回答已采纳
我最近在用React玩Typescript，在将这个在ES6下工作的复制并粘贴到我的.tsx文件中后，我的Typescript环境告诉我以下错误：" Parameter 'theme' implicitly has an 'any' type."和浏览器拒绝呈现。
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core
浏览 2提问于2018-06-22得票数 0
我正在建立一个小的网络应用程序使用的反应和材料-UI，我不知道如何使我的抽屉组件适合我的应用程序栏。使用工具，我可以在控制台中看到，我的组件正在获取classNames，但是不管我做了什么，我的样式都不会应用到它们上。目前，抽屉正在剪裁屏幕顶部的应用程序栏，占据整个页面的高度，而不是安装在应用程序栏下面。为了使我的“侧栏”组件适合于我的"Navbar“组件，我需要更改什么？我之所以将这两个组件创建为单独的组件，原因之一是我计划稍后向它们添加更多的功能。谢谢。
我一直在上跟踪“应用程序栏下的剪裁”组件演示，我还引用了
下面是我的代码片段
我的主应用程序
import React from
浏览 0提问于2019-06-03得票数 2
回答已采纳
我目前正在使用material-ui react库，并复制了响应式抽屉组件示例。
有没有可能将侧边栏和标题分离到一个单独的组件中，并使用侧边栏组件中设置的classes.content样式调用侧边栏函数和main部分中我自己的主要内容
<main className={classes.content}> <Typography noWrap>{'You think water moves fast? You should see ice.'} </Typography> </main>
例如，我的home函数想要使用
浏览 2提问于2017-12-11得票数 1
回答已采纳
1回答
我正在开发一个带有react typescript和material-ui material-ui Drawer的网页，它采用所有的屏幕宽度，但我想让它具有屏幕侧边栏的宽度，就像图像中的示例一样，我该如何解决这个问题？ ?
浏览 12提问于2021-06-17得票数 0
我正在尝试将MenuItem作为变量嵌套在从材料选择组件UI上，这样我就可以公开单个组件来构建下拉输入： import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem';
Select.Item = MenuItem
export default Select 这样做会抛出以下Typescript错误： TS2339: Property 'Item' does not exist on type '(pro
浏览 25提问于2020-05-04得票数 0
1回答
我正在用Typescript重构一个应用程序。除了这个简单的组件之外，一切都进行得很顺利。我使用的是来自material-ui的Input。
import {Input} from "material-ui";
class Cp extends React.Component<any, any> {
render = () => <Input readOnly/>
}
Typescript编译器抱怨readOnly属性，但它在JavaScript中运行良好。
TS2559: Type '{ readOnly:
浏览 0提问于2018-04-17得票数 1
请看下面的代码： import { styled } from "@material-ui/core/styles";
import ButtonBase from "@material-ui/core/ButtonBase";
const MyButton = styled(ButtonBase)({ color: "red" });
const App = () => (
<>
<ButtonBase component="a" />
<MyButton compo
浏览 13提问于2020-04-08得票数 0
回答已采纳
我想在typescript中使用material-ui。
/// <reference path="../../../typings/react/react.d.ts"/>
import React = __React;
import * as FlatButton from "material-ui/lib/flat-button";
interface ATCProps{
clickHandler:__React.MouseEventHandler;
}
export default class AddToCartBtn extend
浏览 1提问于2015-12-02得票数 5
I在主题部分使用 获取错误。当我将基于钩子的组件的样式更改为基于类的组件时。错误是TypeError:无法读取appBar样式中未定义的属性“折叠”。
import React from 'react';
import { withTheme, withStyles } from '@material-ui/styles';
import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@materi
浏览 1提问于2019-11-20得票数 0
我正在尝试添加新的自定义颜色到material-ui调色板(我知道它是4.1版的，但这在未来会有点过时) 我刚开始使用typescript，所以我很难弄清楚该怎么做才能让它工作 我遵循了amterial-ui的文档https://material-ui.com/guides/typescript/#customization-of-theme中的指南，并提出了以下建议 import createMuiTheme, { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
declare module &
浏览 10提问于2019-05-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
