如何更改antd中Upload.Dragger的高度？
要更改antd中Upload.Dragger的高度，可以通过以下步骤进行操作：
- 在使用antd的项目中，找到使用Upload.Dragger组件的代码文件。
- 在代码文件中，找到对应的Upload.Dragger组件的引入语句，通常是类似于
import { Upload } from 'antd';的形式。 - 在代码文件中，找到对应的Upload.Dragger组件的使用语句，通常是类似于
<Upload.Dragger />的形式。 - 在使用语句中，找到对应的Upload.Dragger组件的属性设置部分。
- 在属性设置部分，添加一个名为
style的属性，并将其值设置为一个对象，该对象包含需要修改的样式属性。 - 在
style对象中，添加一个名为height的属性，并将其值设置为所需的高度值，可以是像素值（如300px）或百分比值（如50%）。 - 保存文件并重新运行项目，查看Upload.Dragger组件的高度是否已经更改。
注意：以上步骤是基于antd的默认配置和使用方式，如果项目中对antd进行了自定义配置或使用了其他方式引入和使用Upload.Dragger组件，可能需要根据实际情况进行相应的调整。
推荐的腾讯云相关产品：腾讯云对象存储（COS）。
腾讯云对象存储（COS）是一种安全、高可靠、低成本、高扩展性的云端存储服务，适用于存储海量文件、大数据分析、网站托管、备份存储、容灾恢复、多媒体共享和分发等场景。它提供了简单易用的API接口，支持多种数据传输方式，具备高度可靠性和数据安全性，并且能够根据实际需求进行灵活的扩展和调整。
了解更多关于腾讯云对象存储（COS）的信息，请访问：腾讯云对象存储（COS）产品介绍。
相关·内容
1回答
几个小时前，我问，如何在工具提示中将三角形实现为箭头。
我得到了完美的答案，在这里：
现在，我正在编写来自antd库的工具提示。这个工具提示中的箭头看起来不像我想要的那样。我想在上面的链接中给出与上一个问题相同的风格。
下面是代码盒的链接，在这里，我尝试使用前面问题中的代码对antd库中的工具提示进行样式化--如上面的链接所示。
问题是：
因为你可以看到箭头的角有点长，在较低的边框有白色的缺口。在前面的例子中，没有发生过这样的事情。那里的一切都很合适。
问题出在哪里？
浏览 3提问于2022-06-09得票数 0
3回答
尝试使用AntD创建一个页脚，它实际上将在底部保持不变。而且确实如此。但主要的问题是，它的风格没有，它的风格被扩展到更多的领域。
下面是一个更好地理解它的方法(请看白色部分)：
我测试过的方法：
Layout
Header
Content
Footer
和
Layout
Layout
Header
Content
Footer
下面是代码框：
您知道如何通过将页脚CSS限制为只包含页脚组件来修复它吗？
浏览 25提问于2022-08-04得票数 0
回答已采纳
1回答
我正在使用React组件。我想改变背景颜色的选择。
我遵循了的方法。如果导入'antd/dist/antd.css‘，则无法工作。但是，如果“antd/dist/antd.css”尚未导入，则它确实更改了“选择”的背景色。
如何通过导入'antd/dist/antd.css‘来更改颜色？下面是用于react的代码和css
AntdSelect.js
import React from 'react'
import { Select } from 'antd'
import 'antd/dist/antd.css';
import
浏览 2提问于2020-09-15得票数 0
回答已采纳
我正在用Antd在Next.js中尝试窗口技术，我制作了一个简单的应用程序，它有这个index.tsx页面：
import { CSSProperties } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSiz
浏览 21提问于2022-03-08得票数 0
回答已采纳
我想为antd-mobile-rn库创建并使用一个自定义主题，该网站将我定向到：https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui#antd-mobile-with-rn-custom-ui 我按照说明操作，但颜色仍然是默认颜色。我不喜欢在我的应用程序中给每个元素都添加一个风格。 因此有两个主要问题: 1.我如何调试在package.json "start“中调用的脚本? 2.有没有人这样做并让它工作，特别是在本机反应中？
浏览 51提问于2019-04-03得票数 2
我正在使用antd 的多选功能
它工作得非常好，但我想让它像一样
每个选中的项目都有特定的color.Is，这在antd multiselect中是可能的。Antd提供了一些像labelInValue这样的特性，但是我很困惑如何使用它们没有提供足够的细节。
浏览 12提问于2018-07-23得票数 0
1回答
我正在使用antd的select组件，我可以在select选项中呈现复选框。但是在选择复选框时，它会更改为占位符中的标记。如何才能只选中多个复选框而不将其呈现为占位符中的标记
我的代码在链接中
import React from "react";
import "./styles.css";
import { Select, Checkbox } from "antd";
import "antd/dist/antd.css";
const { Option, OptGroup } = Select;
export default
浏览 7提问于2020-06-27得票数 0
回答已采纳
1回答
我正在写一个移动使用antd-mobile的单页应用程序，
在页面的底部有一个标签栏，你可以看到的项目列表的背景是灰色的，问题是当我向下滚动到底部时，标签栏覆盖了的内容。
如何使列表区域成为滚动区域而不是整个页面？
浏览 1提问于2017-08-09得票数 0
在我的react应用程序中，我导入了antd组件，并使用babel import来延迟加载css样式。 ['import', { libraryName: 'antd', style: true }, "antd"] 我有一些自定义的scss样式，它们覆盖了antd组件样式。 在开发过程中，我的自定义scss完全覆盖了antd样式。 但是当我运行npm build时，情况正好相反，antd覆盖了我的自定义样式。
浏览 61提问于2019-08-30得票数 1
回答已采纳
我使用的是antd-3.22.0和react 16.3.2。我想将Upload.Dragger的高度设置为45px。
我已经尝试过通过将style={{height:"45px"}}放在拖拽工具中来设置拖拽工具的高度，我也尝试过将拖拽工具包装在一个div中，并为该div提供高度，但不起作用。
<Upload.Dragger style={{height:'45px'}}>
<p className="ant-upload-text">Browse or drag file</p>
</Uploa
浏览 118提问于2019-08-19得票数 1
默认情况下，自动完成似乎一次显示8个建议，其余的则必须向下滚动才能看到它。Antd文档中没有与此数字相关的组件属性。有没有办法把它改成另一个固定号码？不如把它都展示出来怎么样？
浏览 6提问于2021-05-13得票数 0
回答已采纳
1回答
使用包(v3)，我希望有一个固定宽度的按钮，在需要时将其文本和换行符包装起来，以便文本适合按钮内部，边框正确地出现在文本周围。
下面是我目前尝试过的：。我注意到使用空格:正常工作，但不与antd。
const { Button } = antd;
ReactDOM.render(
<>
<div style={{width:"100px"}}>
<Button block type="primary" ghost style={{whiteSpace: "normal"}}>Wrap ar
浏览 2提问于2020-08-13得票数 2
回答已采纳
我使用的是NextJs，我想知道如何配置webpack同时支持antd和antd。
目前无法正确配置webpack
浏览 93提问于2019-07-19得票数 0
当我配置我的.roadhogrc时，roadhog的医生说我可以将"proxy“属性设置为与相同。
我添加了一个“路由器”道具，然后我的页面无法加载，因为"index.css“超时。
那么，如何在.roadhogrc中使用"proxy“呢？或者有什么方法可以将api更改为在localhost中测试env？
我找不到"dva“或"roadhog”标签，所以很抱歉使用"antd“标签。
{
"entry": "src/index.js",
"env": {
"developmen
浏览 1提问于2017-06-13得票数 0
3回答
页脚出现在内容的区域中
、、、、
我使用Next.js和antd的布局组件来获得仪表板样式页面，使用它们的Layout组件。在这里，我对样式(CSS)有两个问题：
Footer被夹在Content中:实际上，我正在处理中的一个固定局外人示例的派生程序。我要让Footer在Content组件之间着陆。我认为这是由于造型，但我无法弄清楚。我应该找什么类型的造型问题？
滚动行为:如果完全扩展，侧边栏不能滚动到它的末尾。相反，浏览器窗口滚动条必须滚动，才能在固定的侧边栏的内容中完全移动。如何禁用窗口的滚动条(内容的滚动条看起来也很难看)？如果不可能，如何使侧边栏的滚动平滑和独立于浏览器窗口？
我已经复制了错误.
浏览 1提问于2018-12-14得票数 3
回答已采纳
我试图将antd库添加到从VisualStudio2017 (15.2.2)生成的React项目中。
我从项目模板"ASP.NET核心网络应用程序“开始，在下面的窗口中选择了"React.js”。
在这一点上一切正常。
如果我在antd中添加package.json ("antd"："3.1.0")并在某些tsx文件中添加一个导入，例如，如下所示的home.tsx：
import { Row } from 'antd';
我有三个错误：
at-加载器./node_modules/antd/lib/badge/Scrol
浏览 6提问于2018-01-06得票数 6
我正在使用Antd中的DatePicker组件，并且正在尝试编辑负责处理月份名称的Moment函数。
到目前为止，我的组件显示了缩写名称，但我正在尝试将其更改为MMMM格式，以便显示月份的全名。
有谁知道如何做到这一点，以及在组件级别上是否可能做到这一点？
My Component
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import {
浏览 11提问于2019-07-10得票数 1
回答已采纳
1回答
我已经在我的react项目中实现了antd，有一件事我无法在我的生命中找到。我有一个有3列的行，当屏幕大小缩小时，我想将3列折叠成一列。
每当我调整屏幕大小时，它们一次只折叠一个，而不是一次一次。我能够使用flex在vanilla /css中实现这一点，但由于某些原因，我无法获得与antd相同的效果。我尝试过添加媒体查询，但没有运气。
这是它开始崩溃时的样子，我还附上了我的代码以供参考。可能是列上的flex设置设置不正确吗？
React示例：
CSS
@import 'antd/dist/antd.css';
.Red {background: red; colo
浏览 3提问于2020-09-22得票数 6
回答已采纳
2回答
使用css自定义周末
、、、、
我使用antd用于日期范围。
如何使用css对周日的日子进行样式设计。我们会感谢你的帮助。
编辑：
我得到这个蓝色背景之间的开始，范围和结束。我希望这是持续的。另外，在选定的行之间也有空白，我希望它本身是紫色的。但在这里，我看到选定行之间的白色。
import React from "react";
import "./styles.css";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
import { ConfigProvider }
浏览 6提问于2022-10-19得票数 1
回答已采纳
1回答
我正在使用Typescript和ant设计库，并且我正在尝试扩展其中一个接口，只是为了添加单个属性。我可以导入原始界面(这样你就知道了文件夹结构)：
import { CollapseProps } from 'antd/lib/collapse/Collapse';
然而，我不知道如何扩展它。
我在项目根目录下创建了一个typings/antd文件夹，在tsconfig.json (和baseUrl)中添加了路径配置：
"paths": {
"antd": [
"node_modules/antd",
浏览 10提问于2017-12-12得票数 1
我遵循以下两个示例来设置Nextjs + Tailwindcss + Antd项目：
我可以在没有问题的情况下yarn dev，但是当我尝试yarn build和yarn start项目时，and的css就丢失了。
这是我的来重现这个问题。
编辑：我发现当我删除postcss.config.js中的清除css插件时，问题就解决了。因此，问题是清除css清除所有外部css文件时，yarn build。如何更新postcss配置？
编辑2:试图忽略对外部文件的清除的没有工作：
/* purgecss start ignore */
@tailwind base;
@tailwi
浏览 5提问于2020-04-24得票数 5
2回答
我正在尝试为antd工具提示组件自定义宽度：
如何做到这一点？
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Tooltip } from "antd";
import styled from "styled-components";
const Styled = styled.div`
.ant-tooltip-inner {
color: yell
浏览 4提问于2020-08-20得票数 5
1回答
我正在用react + antd设置Meteor
当我导入所有文件时，如
import 'antd/dist/antd.less';
import 'antd/dist/antd.css';
import 'antd/dist/antd.js';
我收到以下警告，您正在使用整个antd包，请使用来减小应用程序包大小。
如何在我的Meteor.js中进行设置
浏览 3提问于2018-10-22得票数 0
尝试使用clojurescript中的antd，我正在寻找一种惯用的方法来解构js对象。因此，假设我们想要这样做。 import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout; 我如何才能在clojurescript中做到这一点，而不必编写详细的 (let [Sider (.-Sider antd/Layout)
Header (.-Header antd/Layout)
Content (.-Content antd/Lay
浏览 42提问于2019-10-08得票数 0
4回答
Antd附带了一个nices表格组件，但是我在中找不到任何关于如何配置表格的“密度”的东西，例如，表格行的默认高度，以及可能的字体大小。
默认情况下，表格有一个空闲的布局：
我有一个需要更小/更密集行的用例(想想Excel等典型电子表格程序中的密度)。
我是Antd的新手，我不知道从哪里开始。我需要定制Antd的CSS吗？什么是实现它的正确机制，在单元格或行级别上配置高度，或者更确切地说是在填充上打乱？我选择Antd是因为我希望这样的事情不需要太多的CSS知识，我是不是遗漏了什么？
浏览 24提问于2020-04-05得票数 4
回答已采纳
4回答
我正在尝试添加一个LocaleProvider到我的应用程序中，以便将antd组件放在英语中(而不是默认的中文)。我遵循了中的以下说明：
import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
...
return <LocaleProvider locale={enUS}><App /></LocaleProvider>;
然而，这并不起作用：enUS是undefined。我在我的webpack配置
浏览 5提问于2017-06-13得票数 1
问题:关闭模式后，如果用户选择2030日期，antd的数据报警器不重置，重新打开模式后关闭模式，所选年份为2030。
我已经阅读了antd文档，根据Antd的说法，如果设置了defaultPickerValue，那么它将在重新打开模式上显示当前日期，但不像预期的那样工作。
浏览 0提问于2022-09-26得票数 0
2回答
我在我的项目中使用antd react。我需要更改antd中组件的css前缀。它在css中设置了诸如例如:ant-tab之类的前缀，我需要一些东西，比如自定义选项卡-谢谢。
浏览 1提问于2018-09-04得票数 0
1回答
我想使用Formik创建开关组件。我从antd库中获取的工具提示的设计和它的基本用法如下：
import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Switch } from 'antd';
const onChange = (checked) => {
console.log(`switch to ${checked}`);
};
const App = () => <Switch
浏览 14提问于2022-06-20得票数 0
我想将CheckboxChangeEvent接口导入到我的typescript文件中。尽管导入其他antd元素很简单，如：
import {Checkbox} from 'antd'
..。对于一些doing之后的CheckboxChangeEvent，我求助于这样做：
import {CheckboxChangeEvent} from '../../../node_modules/antd/es/checkbox'
..。当然，父路径组件(..)的数量取决于我在源树结构中的深度。无论如何，这似乎是让它工作的唯一方法。
我试过了：
import {Checkbo
浏览 82提问于2021-02-19得票数 0
我正在使用一个，并试图在required = true状态和required=false状态之间切换，我注意到一种特殊的情况，即当输入字段不再需要时，错误消息不会消失。我不知道为什么antd不自己来处理这种情况。
以下是我所做的：
输入字段初始化为required
我写了一些东西，然后擦除，这给出了“请输入你的用户名”的信息，如图像所示
然后我点击，Click to toggle input field按钮。这将输入字段状态从required = true更改为required = false。
但错误信息仍然存在。当输入字段不再需要时，如何使错误消息自动转到？
浏览 1提问于2019-06-26得票数 2
1回答
我需要导入antd css模块，如果我将它放置在javascript文件中，下面的操作是可行的：
import 'antd/dist/antd.css'
但是，如果我将以下内容放在我的global.sass文件中：
@use '~antd/dist/antd.css'
通过js文件中的import './global.sass'导入它，css根本不会加载到页面上。
如何在sass文件中加载全局导入？有没有webpack的配置来做这件事？我用的是style-loader，css-loader，postcss-loader，sass-loader。
浏览 3提问于2020-04-21得票数 0
回答已采纳
我构建了一个小测试项目来试用组件。我正在使用gatsby-plugin-antd和antd，以及gatsby-plugin-sass。我的问题是Antd主题覆盖了我的全局样式。我尝试将全局样式的导入放在gatsby-browser.js和我的布局组件中，但是从node_modules内部加载的样式总是在我自己的全局样式之后结束。
公平地说，我不确定问题出在Gatsby，SASS插件，Antd插件，甚至是babel-import或webpack。
// When loaded in gatsby-browser.js
import "./src/css/public-sans.scss&
浏览 1提问于2021-04-13得票数 1
当我试图将我的less-loader设计库加载到Webpack的前端时，当我从6.0.0版本转移到6.1.0版本时，我收到了这个错误。我想知道是否还有其他人有这个问题并解决了这个问题(我在下面回答了)。
下面是更新之前的较少编译配置：
module: { rules: [{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "less-load
浏览 9提问于2020-05-08得票数 4
1回答
如何从antd图像中移除其他编辑器图标，如缩放、反缩放、旋转选项。当从Antd图像预览图像时。
浏览 0提问于2020-12-07得票数 0
回答已采纳
我必须将一些数据动态地呈现到antD可扩展表中。数据是一个嵌套对象，具有各种属性-
const values = [
[name = 'Josh', city = 'Sydney', pincode='10000'],
[name = 'Matthew', city = 'London', pincode = '20000'],
[name = 'Roger', city = 'Paris', pincode = '2300']
浏览 17提问于2021-12-23得票数 0
我已经设计了我的项目与CRA和antd，不幸的是AFAIK antd布局没有通知，在标题中的用户选项。
所以我尝试使用@ant-design/pro-layout，它在文档中关于如何使用菜单中的通知和用户选项有点混乱。
有没有人可以解释一下如何在antd或@ant-design/pro-layout中实现这一点？
提前谢谢。
浏览 40提问于2019-07-30得票数 1
回答已采纳
根据我对react的理解，它保持窗体所在位置的状态，当状态发生变化时，此状态用于重新呈现窗体。每当用户更改表单输入时，onchange通知将首先修改状态。到目前一切尚好。
我正在尝试理解，当antd与react一起使用时，它是如何改变状态控制流的。关于antd的文档含糊不清，其状态变化背后的原理也没有得到充分的解释。
因此，我们所拥有的是一个fieldDecorator，它可以有效地将字段转换为react/antd控制的组件。我的问题是，一旦控件在antd中更改，它将在何处保持状态？因为可能涉及多个react组件，以及如何找出哪个组件持有该状态。
我正在尝试在多个页面上使用多步骤表单，如果不了
浏览 4提问于2018-08-20得票数 1
回答已采纳
1回答
我想包装antd组件。Input到MyInput中，这样我就可以添加对新的专业人士和classNames的支持，但是当我把它放在Form里面时，它就停止了工作。
MyInput.js
import { Input } from 'antd';
function MyInput({ className='', ...rest }) {
const computedClassName = 'my-input '+className;
return (
<Input className={computedClassName}
浏览 2提问于2017-09-13得票数 0
回答已采纳
1回答
我正在使用create-react-app构建一个react web应用程序。
如你所知，create-react-app上有默认的webpack设置。它有与css-loader相关的设置，特别是webpack.config.prod.js有如下css-loader设置。
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign({
fallback: {
loader: require.resolve('s
浏览 1提问于2018-06-18得票数 0
1回答
我使用rails new demo -j esbuild --css tailwind创建了一个Rails 7应用程序。我对组件使用antd包，并希望使用ant设计样式表和顺风样式表。
将外部样式表添加到默认样式的顺风。我使用它并将application.tailwind.css文件设置为：
@import "~antd/dist/antd.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities&
浏览 10提问于2021-12-23得票数 2
回答已采纳
当执行"yarn create umi“命令时，在”你想启用什么功能? antd“步骤中选择antd，然后按ENTER键，整个过程将始终退出，并得到以下异常：？您希望启用哪些功能？antd events.js:298抛出er；//未处理的'error‘事件^
TypeError: self.env.emit不是/usr/local/share/.config/yarn/global/node_modules/yeoman-generator/lib/index.js:653:22 at processTicksAndRejections (内部/进程/任务_队列.js:97:5
浏览 1提问于2020-02-27得票数 2
3回答
禁用日期选择年，任何人都知道如何禁用蚂蚁设计响应日期时间封隔器年份
谢谢
这里是我的密码
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker } from "antd";
function disabledYear(current
浏览 1提问于2021-06-29得票数 1
回答已采纳
1回答
我创建了一个项目使用电子反应样板https://github.com/electron-react-boilerplate/electron-react-boilerplate一切工作，但我决定添加antd (蚂蚁设计) yarn add antd 然后我导入antd样式。 index.tsx ...
import "./styles/global.css";
import "./styles/fonts.css";
import "antd/dist/antd.css"
... 接下来，我使用了一个类型为primary的按钮 some_co
浏览 3提问于2021-07-22得票数 0
我们已经开始使用这个了。此外，我们还试图集成Ant设计，因为它的组件非常棒。
从Ant的文档中，我创建了一个包装AppWrapper的React样板，如下所示-
import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
return (
<LocaleProvider locale={enUS}>
<AppWrapper>
...
</AppWrapper>
</LocaleProvider&
浏览 5提问于2017-05-21得票数 0
4回答
我想改变工具提示的宽度，但我不能。
我该怎么做？
import React, { FunctionComponent } from 'react';
import {Tooltip} from "antd";
import 'antd/dist/antd.css';
export interface Props {
tooltipeText: string
}
const hintWithTooltipeStyle = {
position: 'relative' as 'relative',
le
浏览 2提问于2020-07-28得票数 3
回答已采纳
正如标题所述。这两者有什么区别呢？
1.
import { Form } from 'antd';
const Components = () => {
const [form] = Form.useForm();
form.setFieldsValue({ ... });
return (
<Form form={form}>
...
</Form>
);
}
import { Form } from 'antd';
const Components = () => {
浏览 4提问于2022-05-12得票数 0
回答已采纳
我使用React和Antd with React-Hook-Form ( Controller )，当我单击submit按钮时，我正在寻找一个自定义Controller响应的解决方案：
使用Antd : multiple模式发送一个具有所有选定值的数组，我希望发送一个字符串，该字符串的所有选定值都由逗号分隔：
例子：
我的实际输出：'A'，'B'，'C'，'D‘
预期产出：“a；b；c；D”
我希望将数组转换为(;)，字符串。
你知道如何做到这一点吗？
谢谢
浏览 11提问于2022-03-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
