尝试在LinearProgress材料顶部显示文本Ui/React
在React中，要在LinearProgress组件的顶部显示文本，可以通过在LinearProgress组件外部包裹一个容器，并在容器中添加文本元素来实现。
首先，确保已经安装了React和Material-UI库。然后，可以按照以下步骤进行操作：
- 导入所需的React和Material-UI组件：
import React from 'react';
import LinearProgress from '@material-ui/core/LinearProgress';- 创建一个React函数组件，并在组件中定义一个状态变量来控制文本的显示：
function LinearProgressWithText() {
const [progress, setProgress] = React.useState(0);
// 这里可以根据实际需求定义文本内容
const text = `${progress}%`;
return (
<div>
<div>{text}</div>
<LinearProgress variant="determinate" value={progress} />
</div>
);
}- 在组件的渲染方法中，使用LinearProgress组件和文本元素来显示进度条和文本：
function App() {
return (
<div>
<LinearProgressWithText />
</div>
);
}- 最后，将组件渲染到DOM中：
ReactDOM.render(<App />, document.getElementById('root'));这样，就可以在LinearProgress组件的顶部显示文本了。根据实际需求，可以根据进度条的值来动态更新文本内容。
关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或官方网站上的相关内容。
相关·内容
我正在尝试覆盖材料UI linear progress栏的颜色。我尝试的第一个解决方案(简化)如下所示。 import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
const useStyles = makeStyles({
colorPrimary: {
backgroundColor: "#
浏览 17提问于2020-10-22得票数 0
回答已采纳
1回答
我正在尝试在我的网站上添加一个功能，在两个设定的日期(24小时间隔)之间有一个进度条，我正在努力寻找一个提供这一功能的软件包。我一直在使用材料UI来创建网站的其他部分，并希望这是可能与这个我找到。
我认为使用“线性确定”选项是有意义的，它的代码如下所示，但是想知道如何将它从持续500ms修改为在给定的设置开始点后持续24小时。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@mate
浏览 0提问于2020-07-07得票数 0
在单击按钮以显示线性进度条以通知用户请求正在处理后，我正在尝试实现LinearProgress @materail ui。我在使用LinearProgress进行CSS设计时遇到了困难。目前，LinearProgress正在接管整个dialogPrompt。
下面是React中按钮中的LinearProgress调用
<Button
onClick={handleSign}
color="primary"
disable
浏览 0提问于2020-11-06得票数 0
我正在尝试使用自己的值更新Material UI LinearProgressWithLabel进度值。我从Axios.post方法中的on upload进度中获取我的值，它是低于它的百分比值，它是一个数字。 <Grid item xs>
<LinearWithValueLabel value={percent}/>
</Grid> 然后是进度条： import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
impo
浏览 15提问于2020-10-07得票数 0
回答已采纳
1回答
我使用react-select和material-ui一起制作了一个外观和功能类似于材料的自动完成组件。
我遵循了这里的基本设置
然后必须按照API处理的方式调整我的数据结构，这一切都很好，但现在我尝试允许用户创建一个新选项，而且我似乎无法让它显示该选项。
以下是原样的组件
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from "./styles";
import Me
浏览 0提问于2018-07-12得票数 1
回答已采纳
我有一个简单的文件上传实用程序，我正在使用，并结合起来，我想使用资料-ui LinearProgress栏来显示进展。
下面显示的是我创建的组件，它将文件上传实用程序与LinearProgress条一起呈现。
我使用库来使用多部分格式数据将后端实际上传到后端。超级代理的请求允许回调或事件处理程序上传进度。在我的代码中，进度事件处理程序将被成功调用，并由console.log语句进行验证。在每个进度调用中，我更新this.state.completed属性，该属性由LinearProgress条使用。
问题是进度条不前进。我肯定错过了一些很简单的东西。
任何帮助都是非常感谢的，并感谢您的努力。
浏览 3提问于2016-11-07得票数 4
回答已采纳
1回答
我通过Material使用LinearProgress，我做了一个定制的ColoredLinearProgress，只是为了改变它的颜色：
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { LinearProgress } from '@material-ui/core';
class ColoredLinearProgress extends Component {
render
浏览 1提问于2020-02-03得票数 0
回答已采纳
1回答
响应路由器响应下加载条的状态管理
、、、、
我有一个应用程序在React使用材料-ui的响应抽屉组件。我们叫它ResponsiveDrawer吧。在这个组件中，我有一个名为"loading“的状态变量。
class ResponsiveDrawer extends React.Component {
constructor(props) {
super(props);
this.state = {
loading:false
}
this.setLoading = this.setLoading.bind(this);
}
浏览 1提问于2018-01-03得票数 1
回答已采纳
1回答
css动画在不可见时会影响性能吗
、、、、
我将React与材料Ui一起使用，在加载资源时遇到了渲染不确定进度条的情况。虽然没有显示进度条，但它仍然通过visibility: hidden css属性占用空间。 这样做时，进度条的css动画也保持活动状态，虽然不可见，但仍然可以使用元素检查器查看。 为了禁用它，我将进度条的模式更改为确定(没有动画)，如下所示： <Fade in={visible}>
<LinearProgress variant={visible ? 'indeterminate' : 'determinate'} />
</Fade> 我
浏览 26提问于2020-08-27得票数 1
回答已采纳
2回答
假设有一个我喜欢但想要修改的React组件。对于本例，我们将使用Material UI的LinearProgress。我想做一个可点击的搜索栏。
class SeekBar extends LinearProgress {
componentDidMount() {
super.componentDidMount();
console.log('my stuff here');
}
}
但我觉得在改变render返回的内容方面，我能做的事情可能非常有限。不过，也许我做的一切都错了。如果我喜欢一个特定的React组件，比如Material UI组件，有什么
浏览 2提问于2016-02-28得票数 36
回答已采纳
我有一个react应用程序，父组件有一个按钮，当单击该按钮时，显示一个简单的对话框，其中包含一个文本输入和一个提交按钮。启用严格模式。有两个问题
表单输入设置为在输入中显示初始值(formik initialValues设置)，但没有设置它。
当单击按钮时，我会在控制台中看到一个错误；
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref di
浏览 1提问于2020-08-08得票数 0
1回答
我想从父组件内部的子组件调用一个函数。我知道我可以使用React createRef作为解决方案。到目前为止，我已经尝试过了，但是current的值仍然为空。也许我忘了什么，但我想不出来。如果我可以通过另一种方式修复它，它也会很好。
我的例子：
import * as React from 'react';
import FormComponent from "./FormComponent";
import CalendarComponent from "./CalendarComponent";
import LinearProgress f
浏览 2提问于2020-08-04得票数 0
更新： Ok，我误解了useDeferredValue，我认为它更像是一个已取消的值，但事实并非如此，您可以将超时定义为显示旧结果的时间。
所以
const search = useDeferredValue(value, { timeoutMs: 10000 })
给了我想要的效果，只是它仍然显示出正确的警告。
原始
我想有一个搜索与其下面的结果，搜索结果应该立即过滤根据输入的文本字段。然后，查询应该被取消，旧的结果也应该显示当它花费少于3000 m.s。
我正在使用新的并发模式，在React和Relay实验中。我使用了新的useDeferredValue，在这个页面上有记录：
但我收到这样
浏览 5提问于2019-11-30得票数 0
我使用的是React和material-ui。我有一个网络插口，每分钟发送9000条消息。
在我的react应用程序中，我有一个material-ui确定的进度条，它从web socket消息中获取它的值。进度条不能准确反映来自web套接字消息的值。
我将web套接字消息存储在状态中，因此UI经常重新呈现。
如何避免这个问题？我不能限制消息，因为我需要保存和处理所有消息。提前谢谢。
浏览 15提问于2020-03-09得票数 1
回答已采纳
我想显示在反应一个绿色的按钮与眼睛，就像我的素描a。我做了我的桌子材料-ui从资料-ui网站。然而，我不能把我的<IconButton><Visibility/></IconButton>固定在我的网站上。我跟踪了很多视频，但都没成功。我在我的桌子上尝试了不同的值，但是这张表显示了V(滴答)。
我输入了“进口”：
import React from 'react'; import MaterialTable from 'material-table'; import IconButton from 'materia
浏览 2提问于2020-06-03得票数 0
回答已采纳
在npm i --save react-router-dom和npm install --save with-router之后，我尝试编写
import {withRouter} from 'react-router';
但是我得到这个错误尝试导入错误：'withRouter‘没有从'react-router’中导出。
import React from 'react';
import PropTypes from 'prop-types';
import { Formik } from 'formik';
imp
浏览 109提问于2021-03-04得票数 5
我想自定义MaterialUI的LinearProgress组件的外观，以便表示完整性的条是渐变的，这样无论长度如何，左侧是颜色A，右侧是颜色B，渐变的快慢取决于条形的长度。 ? 请注意，进度的末端是相同的水色和淡紫色... ? 基本上我想 background-image: linear-gradient(to right, #6fcbb6, #9c64f4);
width: 20%; 然而，材料似乎像这样设置了栏的进度： transform: translateX(-80%); 这意味着如果我用渐变设置进度条的样式，它看起来像这样： ? (使用dev工具突出显示元素：)
浏览 42提问于2021-01-15得票数 1
回答已采纳
我正在编写一个Electron应用程序，使用React作为前端，使用JEST + React Testing Library来运行测试。我在一个模块中有以下简化的代码： import React from 'react';
import { ipcRenderer } from 'electron';
import Paper from '@material-ui/core/Paper';
import LinearProgress from '@material-ui/core/LinearProgress';
const
浏览 77提问于2019-09-22得票数 2
1回答
这是在一个文件夹中定义的代码。我试着在这里面加入材料图标。但它显示的是错误
使用JSX时，React‘必须在作用域内
import { toast } from 'react-toastify';
import ErrorIcon from '@material-ui/icons/Error';
const Alert = (type, message) => {
switch (type) {
case 'warning':
return toast.warning(message)
浏览 2提问于2020-05-07得票数 2
回答已采纳
2回答
显示加载条，直到取出
、、、、
我正在试着显示装货栏，直到它被取出来。因此，我选择使用材料UI加载栏。我创建这个方法是为了显示加载栏renderProgressBar。但当我试图渲染它时，却出现了这样的错误：
invariant.js:42 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to e
浏览 4提问于2019-10-03得票数 1
//Component Style:
const BorderLinearProgress = withStyles(theme => ({
bar: {
borderRadius: 8,
backgroundColor: "red"
}
}))(LinearProgress);
//Component use:
<BorderLinearProgress variant="determinate" value={50} /> 我是第一次接触react和material-ui。在上面的代码中，我
浏览 33提问于2020-08-04得票数 0
嗨，我有一个与取消按钮，与文件上传相关的进度条。文件的上载将触发进度条。有一个取消上传过程的按钮。
作为取消上传的一部分，我调用了两个函数。一个用于创建Axios cancelToken，然后是包含令牌的upload文件方法。
在我添加cancelToken之前，上传文件一直在工作，但我仍然无法取消文件上传。有什么想法吗？我觉得我在cancelToken方面遗漏了一些步骤。
进度条：
import React, { useState, useRef } from "react";
import { makeStyles } from "@material-ui/core
浏览 2提问于2020-10-09得票数 1
1回答
我正在使用react显示更多的文本控制器，在我的spfx text部件中使用react。我需要替换showMore和showLess字符串链接为ExpandMore和ExpandLess材料ui图标在我的webpart.is有什么方法吗？
<ShowMoreText
/* Default options */
lines={2}
more="Show More"
less="Show less"
anchorClass=""
onClick={this.executeOnClick}
expanded={fals
浏览 3提问于2020-03-23得票数 3
回答已采纳
我试图为test functionality生成随机数，以便在我的Material UI 中显示。这段JS代码正在中工作。但我想用我的反应J来显示这个随机数。
任何帮助/建议我怎样才能做到这一点。
//Testcode
class TestPage extends React.Component {
constructor(props) {
super(props);
this.state = {
displayProgress: ""
}
}
displayProgress() {
浏览 1提问于2020-10-05得票数 1
回答已采纳
2回答
我有以下组件使用的材料-ui 1.0.0-beta 31。版式样式不显示在页面上，所有文本都具有相同的样式。有人能解释一下我做错了什么吗？
import React from 'react';
import Typography from 'material-ui/Typography';
const LearningPage = (props, { authUser }) =>
<div>
<Typography variant="headline" component="h2">
浏览 0提问于2018-02-06得票数 2
回答已采纳
2回答
我需要一些建议来创建一个音量表栏。我使用的是reactjs和资料ui。我有一个基本的LinearProgress.植入现在我想用一个新的设计来升级这个。我们如何使用材料-ui来实现这一点？任何建议都会帮助我找到正确的方向。
basic代码
class AudioProgress extends Component {
render() {
const { classes } = this.props;
return (
<LinearProgress variant="determinate" value={10} className=
浏览 3提问于2021-02-10得票数 0
我对材料界面很陌生。所以，这里我使用了Textfield类型的日期。通过在文本框中显示“dd”。但是，我想在默认情况下显示一个字符串值，如"Add道布(MM/DD/YYYY)“。我尝试了一些方法，它不使用字符串值。请告诉我，我怎样才能做到这一点。
import React from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';
const App = () => (
<div sty
浏览 0提问于2019-06-19得票数 0
1回答
帮助我解决，需要被标记为在formik中的位置保持器反应js代码如下
import * as React from 'react';
import {render} from 'react-dom';
import {Formik, Field, Form} from 'formik';
import {
Button,
LinearProgress,
MenuItem,
FormControl,
InputLabel,
FormControlLabel,
} from '@material-ui/core'
浏览 0提问于2019-09-24得票数 2
2回答
我正在做一个步骤，我想在每个步骤之间添加一个进度条。我使用的材料-ui步进连接器来实现这一点。但是，相同的连接器适用于所有步骤。这不是一个真正的问题，因为我可以使用jss完成它。
bar: { transform: "translateX(-101%) !important" } // This rule can control progress bars
这里真正的问题是，我不知道如何使用jss将规则添加到一个条形图中。
如果有更好的方法来添加进度条，太好了。我只是分享我的，给你更多的背景。
这就是我所拥有的：
代码：
浏览 1提问于2020-11-27得票数 2
回答已采纳
1回答
reactJS的material ui文档提出了用于确定进度条的示例代码。
export default class LinearProgressExampleDeterminate extends React.Component {
constructor(props) {
super(props);
this.state = {
completed: 0,
};
}
componentDidMount() {
this.timer = setTimeout(() =>
浏览 0提问于2017-12-22得票数 2
回答已采纳
我正在使用react、nextjs和typescript启动一个项目，我试图向后端提交一个表单，但是当尝试使用该函数调用使用@ urql-codegen生成的函数时，我得到了以下警告: formik.esm.js:925警告:从submitForm()错误捕获了一个未处理的错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
和查询，但查询不会触发
我的错误可能是我不知道该怎么做
下面的代码
import React f
浏览 1提问于2020-12-13得票数 0
回答已采纳
1回答
我有一个问题，我需要根据复选框的状态显示和隐藏输入/文本字段。意味着当复选框状态被选中时，我需要显示TextField，当我取消选中时，它应该隐藏。我已经在下面附上了这个组件的代码。如您所见，我已经创建了TextFields，但是我需要隐藏/显示它们。当我检查/取消选中checkbox2时，显示/隐藏TextField2。谢谢您的任何建议或建议！
import React, { useState } from "react";
import { Button } from "../../components/Button";
import { Checkbo
浏览 4提问于2020-12-21得票数 0
回答已采纳
我正在尝试创建一个滑块，它将有它的显示值定期更新。Spotify/Soundcloud/YouTube上的播放时间线就是一个例子。我仍然希望滑块能够接受用户输入，这就是我不使用LinearProgress组件的原因。
但是，每当更新value属性时，我都会收到以下错误消息：
Material-UI: A component is changing an uncontrolled Slider to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide b
浏览 0提问于2020-01-26得票数 0
1回答
谁能帮我创建一个日历组件使用react和材料UI。日历应该类似于链接https://react.rocks/example/react-big-calendar中显示的日历。我已经检查了材料UI的调度器组件，但据我所知，它是经过许可的。有没有人可以帮我从日历的设计部分开始呢？提前谢谢你！
浏览 27提问于2020-09-07得票数 0
回答已采纳
2回答
我正在尝试与材料用户界面的反应，但我不知道如何使它工作。我跟踪了这些文件，并做了以下工作：
npm安装材料-ui
npm安装
然后在我的App.js中插入“从‘Reacti-抽头-事件-插件’导入injectTapEventPlugin；
然后“从”material ui/ RaisedButton“导入RaisedButton”；
我的App.js有这样的RaisedButton
<RaisedButton label="Default" />
但当我运行它时，浏览器中没有显示任何内容。
import React from 're
浏览 3提问于2016-09-01得票数 1
回答已采纳
我想要居中的文本在一个材料-UI按钮，使文本是居中，而不管它旁边的图标。目前，图标包含在中间位置。
演示中的前两个按钮显示了它当前的外观，我正在寻找文本，就像它在下面两个按钮中显示的一样。在这些按钮之前和之后分别使用图标，而不影响按钮的文本。
import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import KeyboardArrowRig
浏览 3提问于2020-08-19得票数 1
回答已采纳
1回答
测试材料-带jest的UI很慢
、、、、
我在我的应用程序中使用了reactjs和material。对于单元测试，我使用的是玩笑。
版本：
react: 0.13.3
material-ui: 0.12.1
jest-cli: 0.5.8
如果我在React.Component中使用一个资料-ui，我的jest测试真的很慢。
示例1：
var React = require('react');
module.exports = React.createClass({
render: function () {
return (<div></div>);
浏览 1提问于2015-10-02得票数 0
2回答
当禁用但不起作用时，我正在尝试对输入中的文本应用不同的颜色。我使用的是Ui材料 import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
const useStyles = makeStyles(theme => ({
inputText: {
color: "blue"
浏览 23提问于2020-01-07得票数 0
当尝试在代码中实例化材料时，它抛出错误消息:尝试导入错误：' ToogleButton‘is not exported from '@material-ui/lab’。 import { ToogleButton } from '@material-ui/lab'; 版本： - @material-ui/core@4.9.8
- @material-ui/lab@4.0.0-aplha.47
- react@16.13.1
- react-dom@16.13.1
浏览 4提问于2020-04-03得票数 0
我有这样的代码：
/* eslint-disable react/display-name */
import { Box, Button, LinearProgress, makeStyles } from '@material-ui/core';
import { Refresh } from '@material-ui/icons';
import { SearchHistoryContext } from 'appContext';
import useSnackBar from 'components/useSnackbar&#
浏览 0提问于2021-02-16得票数 1
我正试着在故事书中找到一个本地字体。当前，字体通过全局scss加载，并应用于任何文本对象。但是，我无法获得显示在材料UI组件中的字体。
global.scss
@font-face {
font-family: "Iosevka";
src: url("../../assets/iosevka-ss01-regular.woff2");
}
GlobalStory.tsx
import { createGlobalStyle } from "styled-components"
const GlobalStory = createGlo
浏览 1提问于2020-03-29得票数 2
有人知道React+Material-UI可以在ASP.NET上使用吗？
我正在尝试使用React.NET，但它不能使用Material-UI组件。
甚至用webpack来编译它，还是只为NodeJS编写的材料UI？
谢谢
浏览 1提问于2015-12-03得票数 3
我正在尝试为React设置材料UI，通过Babel使用JSPM和ES6。
1)安装材料-带jspm install material-ui=npm:material-ui的ui
2)这使我能够将材料ui导入到React组件文件中，如下所示：import {TextField, LeftNav} from 'material-ui'
此时，我在ES6文件中获得了正确的引用，因此如果我执行一个console.log(TextField)，就会打印出react组件。
遗憾的是，我目前的问题是在尝试使用jsx中的组件时遇到错误
return (
<div>
浏览 0提问于2015-08-24得票数 0
1回答
使用ToggleButton和ToggleButtonGroup组件从material-ui开始-ui的。为了避免常见的material-ui，也尝试使用styled-components。
我有以下的反应代码，这是无法正确的目标材料用户界面基础按钮。
如何使用样式组件正确地完成此操作？
我错过了什么最佳实践吗？
(我知道材料ui可能在布局上固执己见，但说我想要一个基本元素的悬停或文本颜色)。
// Also imports React, gatsby packages etc
import ToggleButton from '@material-ui/lab/To
浏览 5提问于2020-01-29得票数 3
回答已采纳
2回答
我试着用材质UI制作一个自定义的弹形图，我的想法是在两个MuiLinearProgress条之间相邻有一个垂直分隔符。我似乎想不出一种方法来把它们放在一起。
<div className={classes.bulletGraph}>
<div>
<LinearProgress
className={classes.firstBar}
value={80}
variant="determinate"
title="test"
/>
</div>
<div&
浏览 4提问于2020-03-19得票数 5
回答已采纳
1回答
我试图覆盖材料UI的输入，所以我的文本字段周围有一个框，而不是一行。我以材料为榜样，制作了一个按钮。我不确定要用什么不同的方法来重写文本字段。提前谢谢。
MyTheme.js
import { createMuiTheme } from 'material-ui/styles';
import Input from 'material-ui/Input';
export default createMuiTheme({
overrides: {
MuiInput: {
Root: {
bo
浏览 1提问于2018-04-29得票数 7
回答已采纳
因此，我正在尝试构建的是一个媒体播放器，它可以在用户想要收听mp3文件时重新加载。
基本上，概念是这样的
media-player.js -显示标题和艺术家以及专辑图片
programs.js有一个按钮(LISTEN)，然后在media-player.js中渲染，并通过道具(比如艺术家，歌曲和专辑封面)
如果媒体播放器已经被渲染，我需要它重新渲染。
我不知道如何实现这一点，我已经创建了我的media-player.js，但每次我点击programs.js中的一个按钮，因为它已经加载，它不会删除和重新加载。
media-player.js
import React from 'react
浏览 0提问于2019-09-17得票数 0
现在，我想要创建一个组件，并将颜色和值从它的父组件传递给它。在这里，更具体地说，我希望将颜色传递给样式，这样我就可以根据父组件更改颜色。但是我得到了错误：Error TS2339:属性'color‘在类型'{}'上不存在。
import React,{FC} from "react";
import {createStyles, makeStyles} from "@material-ui/core/styles";
import {BackstageTheme} from "@backstage/theme";
impo
浏览 0提问于2021-04-26得票数 0
2回答
资料UI列表组件没有显示
、、、
我想显示一个材料UI列表作为我的下拉菜单的一部分(一个材料UI抽屉组件)的移动视图，但由于某种原因，实际的列表没有被显示。
列表的代码如下所示：
const menuItems = [
{
text: 'Home',
path: '/'
},
{
text: 'About',
path: '/about'
}
];
...
<List>
{menuItems.map(item => (
<Li
浏览 2提问于2021-07-29得票数 1
回答已采纳
3回答
我已经尝试为android创建一个反应本地应用程序，在这个应用程序中，子图像和名字将显示在一行中。您可以在上查看它。
import React, { Component } from 'react'
import { AppRegistry, Text, View, Image } from 'react-native'
export default class App extends Component {
render() {
return (
<View>
浏览 0提问于2018-07-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
