设置Formik Multi-Select组件的样式以使其看起来像材质-UI选择
Formik Multi-Select组件是一个用于处理多选选项的表单组件。要设置其样式，使其看起来像材质-UI选择，可以按照以下步骤进行操作：
- 在页面中导入所需的CSS样式文件，可以通过引入外部的CSS文件或使用CSS-in-JS方式实现。
- 在Formik Multi-Select组件的外层容器上应用合适的类名或样式，以便在样式表中进行定制。
- 使用CSS选择器来选择Formik Multi-Select组件的各个部分，例如选项列表、选项、下拉箭头等。
- 通过设置合适的样式属性和值来调整组件的外观，例如背景颜色、边框样式、字体颜色等。
- 使用CSS伪类来定义交互效果，例如悬停时的背景颜色变化或选中状态的样式变化。
- 使用CSS动画或过渡效果来提升用户体验，例如展开/收起选项列表时的动画效果。
- 如果需要，可以使用CSS预处理器或CSS框架来简化样式的编写和管理。
注意，这里没有提及具体的腾讯云产品和产品介绍链接地址，因为这些与Formik Multi-Select组件的样式设置并没有直接的关联。如果需要在腾讯云上部署应用或使用相关产品，可以参考腾讯云的官方文档和资源进行相应的学习和配置。
总结起来，要使Formik Multi-Select组件看起来像材质-UI选择，需要通过设置合适的CSS样式来调整其外观，包括容器样式、选项样式、下拉箭头样式等。具体的样式设置可以根据材质-UI的设计准则和腾讯云的品牌风格进行自定义。
相关·内容
1回答
如何更改MUI中复选框的颜色？
、、、、
我试图更改材质UI复选框的颜色，并使用FormIk提交数据。我想将复选框的默认颜色更改为红色，但我不知道如何更改它。
<FormGroup>
<Box display="flex" flexWrap="wrap">
{daysOptions.map((day, i) => (
<Box key={i}>
<Field type="
浏览 3提问于2021-12-24得票数 1
我有一个formik格式的表单，字段通常如下所示：
<Field
component={TextField}
name="phoneNumber"
type="text"
required
label={t('containers:CommonFields.phoneNumber')}
variant="outlined"
margin="normal"
/>
其中
浏览 0提问于2020-09-17得票数 2
我用formik实现了表单验证并做出了反应。我用的是材料用户界面。
<Formik
initialValues={{ name: '' }}
onSubmit={values => {
console.log('submitting', values);
}}
validate={values => {
alert();
let errors = {};
if (!values.name) {
errors.name =
浏览 4提问于2019-11-14得票数 0
2回答
是否可以转换材料UI元素
<Container component="main" maxWidth="XS">
<Typography component="h1" variant="h5">
Sign in
</Typography>
添加到样式组件中？
我尝试过这种排版，但文本看起来要小得多。
export const Typo = styled.h5`
export const Typo = styled(Typography)`
component:
浏览 2提问于2020-04-06得票数 0
我有一个现有的表单，使用，使用在formik-material-UI1.0下工作的自定义组件： const MyCheckbox = ({ field, form, label, ...rest }) => {
const { name, value: formikValue } = field
const { setFieldValue } = form
const handleChange = event => {
const values = formikValue || []
const index = values.indexOf(rest
浏览 34提问于2020-02-02得票数 0
回答已采纳
在我的应用程序中，我应用了一个自定义主题，如资料UI文档中所描述的。
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
const App = () => {
const theme = createMuiTheme({ palette: { primary: { main: 'red' } } });
return (
<MuiThemeProvider theme={theme}>
<Route path="
浏览 9提问于2020-09-01得票数 1
回答已采纳
7回答
我正在尝试将Formik与Material-UI文本字段一起使用。如下所示： import TextField from '@material-ui/core/TextField';
import {
Field,
FieldProps,
Form,
Formik,
FormikErrors,
FormikProps
} from 'formik';
import React, { Component } from 'react';
interface IMyFormValues {
firstName: stri
浏览 152提问于2018-08-31得票数 24
回答已采纳
我最近开始使用Material UI，我不确定使用它的正确方式是什么。有时候，我想要自定义材质UIcomponents的样式。但为此，我必须处理".js“文件，我认为这是不合适的。
有没有一种方法可以将材质UI组件的多个自定义样式/组件存储在不同的文件中，然后从该文件导入样式/组件？
谢谢!
浏览 0提问于2020-04-10得票数 0
2回答
我正在尝试在react中使用material UI。
在这个网站上：
上面写着
material-components-web应作为对等依赖项自动安装。通过您选择的方法(使用链接标签、css加载器等)在项目中包含node_modules/material-components-web/dist/material-components-web.min.css。
但我不确定这到底是什么意思。我必须如何以及在哪里导入该文件才能使用该库？
浏览 4提问于2018-06-14得票数 0
我试图覆盖角度材质，所以我使用了::ng-deep，但在sonarqube中得到了错误。请帮我解决这个问题。
浏览 98提问于2020-04-29得票数 2
我正在使用react-bootstrap和formik。
下面的UpdateWorkloadForm组件是在Modal的主体中呈现的。
import React, { useImperativeHandle, useLayoutEffect, useReducer, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Form, Row, Col } from "react-bootstrap";
import "react-datetime/c
浏览 4提问于2022-04-04得票数 0
回答已采纳
我正在尝试使用Modular CSS更改Material UI TextField组件的边框颜色，但是当我尝试这样做时，它不起作用。 CSS (Styles.module.css格式)： .formInput {
font-size: 18px !important;
font-family: Roboto, serif !important;
color: #057FA8 !important;
border-color: #057FA8 !important;
}
.formInput:hover {
border-color: #057FA8
浏览 27提问于2021-11-10得票数 0
1回答
我正在尝试使用formik与资料-ui Textfield组件与select attr，每次我改变选项，它给我这个警告
Material UI:您已经为select (name="subIndicatorId")组件提供了一个超出范围的值null。考虑提供一个与可用选项或“”匹配的值。可用的值为：1、2、3、4、5、55、161、162、163、164、193、233、234、235、236、237、238、239、<code>D20<//code>、<code>D21<//code>、242、<code>D23&l
浏览 8提问于2021-02-04得票数 4
回答已采纳
2回答
我使用Formik作为库来处理我的表单值。我正在尝试使用一个自定义组件作为Field，我的父组件如下所示： <Formik
onSubmit={(values) => {
console.log(values);
}}
>{({values}) => (
<div className="card-wrapper">
<Form>
浏览 22提问于2019-05-04得票数 1
默认情况下，清除图标通常用于文本输入，而在某些情况下，如果视口中有许多可选的选择字段或日期选择器，则用户希望将所选项目或拾取的日期重置为空。选择域总是会让你选择一个非空的项目，即使你错误地触摸了选择区域！如何做到这一点呢？或者我只是在选择域旁边添加一个显示'clear‘的按钮，当点击时，它会将选择域中的选定值重置为占位符或空值？
浏览 2提问于2013-09-02得票数 0
1回答
我试图在我的Formik组件中添加一个重要的UI 'Select‘，但是不能将这些值传递给Formik的initialValues。
const [hours, setHours] = React.useState('');
const handleHourChange = ({ target }) => {
setHours(target.value);
};
<Formik
initialValues={{
price: '' //not Material UI. Works.
hours: hou
浏览 4提问于2020-04-14得票数 0
回答已采纳
我正在尝试更改组件的格式，但是在UI中仍然显示了月份日期。
<DesktopDatePicker
inputVariant="outlined"
label="Pick-up date"
id="date-picker-dialog"
name="startDate"
onChange={(val) => {
formik.setFieldValue("startDate", v
浏览 7提问于2022-08-07得票数 1
回答已采纳
我正在使用Material-UI并使用makeStyles和CSS-In-JS构建一个表单来进行样式设置。我有一个来自Material-UI库的表单，我正在尝试设置它的样式。我正在尝试弄清楚如何针对来自库的form元素的类并覆盖样式。 下面是我尝试针对的表单和Material-UI类(表单的第一个文本输入字段的before标记)： ? 我想要更改文本字段的border-bottom属性。这是我尝试过的。看看CSS中的underline类和表单的第一个文本输入： const useStyles = makeStyles((theme) => ({
root: {
浏览 46提问于2020-06-26得票数 0
使用具有触摸功能的监视器，我在任何控件上都没有悬停样式。
当我悬停在一个材质UI按钮上时，我会得到以下样式：
如何禁用所有@media (悬浮:无)样式，而不覆盖每个控件/每个状态的样式？
我使用的是资料UI3.9.
浏览 4提问于2019-10-10得票数 1
回答已采纳
2回答
我是新的角，CSS和Html。我使用了MatTabsModule (从‘@angular/MatTabsModule/tab’导入{MatTabsModule}；)来创建选项卡，但是我能够调整/更改高度、背景等等。总之，我无法覆盖MatTabsModule类的默认属性。请帮帮我。下面是我的CSS和Html代码。我希望不需要打字代码。
HTML：-
<mat-card>
<mat-card-content>
<mat-tab-group class="tab-group" dynamicHeight>
<mat-tab
浏览 2提问于2018-04-29得票数 0
回答已采纳
我正在使用react、nextjs和typescript启动一个项目，我试图向后端提交一个表单，但是当尝试使用该函数调用使用@ urql-codegen生成的函数时，我得到了以下警告: formik.esm.js:925警告:从submitForm()错误捕获了一个未处理的错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
和查询，但查询不会触发
我的错误可能是我不知道该怎么做
下面的代码
import React f
浏览 1提问于2020-12-13得票数 0
回答已采纳
我现在正尝试用Formik在NextJs 13 (类型记录)上创建一个表单。我创建的表单不起作用，然后我尝试从Formik添加示例代码片段，如下所示。我创建的表单和Formik的示例都只是在控制台中返回TypeError: React.createContext is not a function。我可以在另一行控制台错误中看到这个(sc_server)/./node_modules/formik/dist/formik.cjs.development.js。
import * as React from 'react';
import {
Formik,
Formik
浏览 22提问于2022-10-30得票数 6
我有一个名为WorkingHours的组件，它呈现许多WeekDay组件
const WorkingHours = () => {
return (
<div>
<WeekDay day={'Monday'} />
<WeekDay day={'Tuesday'} />
<WeekDay day={'Wednesday'} />
<WeekDay day={'Thursday'} />
<
浏览 0提问于2020-04-07得票数 0
对不起，我想了解并实现一些使用Formik的东西。 我有两个选择字段，我希望将它们的选定值传递给formik值。它们所做的基本上就是获取CountryArray和相应的区域。我将它们创建为独立组件的原因是，这样我就可以将它们传递给Formik中的字段组件。我的国家数组来自import countries from "../data/c-r";。我也在使用来自react的useState。但是我知道使用formik时，你不再需要管理你的状态，因为Formik可以做到这一点。我如何才能做到这一点。 const [country, setCountry] = useState(
浏览 20提问于2020-11-19得票数 0
回答已采纳
3回答
我正在设置一个与Gatsbyjs的联系表格，需要一个数据报警器。是否可以在无状态组件上使用react？我试过了，但没有成功(因为指的是类组件，所以我在这里并不真正知道如何操作)。
这是一个没有反应日期的表单示例(我使用的是Formik)：
import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
function encode(data) {
return Object.keys(data)
.map(key => en
浏览 0提问于2019-04-16得票数 0
回答已采纳
我有一个问题，我有一段时间找不到答案。 它是关于树模式下的DHTMLX调度程序时间线视图。问题是，具有比树中文件夹元素的可用空间更长的文本的标签(这些标签具有子级)消失了，它们不会显示在时间轴视图的第一列中。我不明白为什么会发生这种事。调度器上有没有我遗漏的设置。重要的是要注意，调度器的样式必须与dhtmlxscheduler_material.css文件或换言之材料设计。Here is an image of the scheduler with the problem shown 我还提供了一个模拟该问题的代码示例。https://docs.dhtmlx.com/scheduler/sn
浏览 27提问于2020-03-27得票数 0
回答已采纳
我有一个使用Formik表单(子组件)和Modal (父组件)的登录页面。
问题是-当我在没有提交的情况下输入Formik表单(子组件)并关闭Modal (父组件)并尝试再次打开它时，它仍然显示前面的值。
当我关闭模式时，我想将Formik值设置为初始值。如果我使用的是react状态，那会很容易，但我使用的是formik，这就是为什么我感到困惑。
Login表单(子组件)
import React, { useState } from 'react'
import TextField from '@mui/material/TextField';
imp
浏览 3提问于2022-07-31得票数 1
1回答
我试图通过样式化组件将样式应用到Material UI Tab组件，但它有一个选定的prop值为true，但我没有任何运气。根据Material UI，当所选属性的值为真时，组件将获得一个css类，但我试图应用于该css类的样式都没有实际应用。
Tab组件：
const StyledTab = styled(({ ...props }) => (
<Tab {...props} classes={{ selected: "selected" }} />
))`
& .selected {
background-color: yellow
浏览 3提问于2018-11-26得票数 1
3回答
我使用material ui来显示reactjs应用程序中的选择选项。但这些选项是透明的，很难看到。有什么方法可以去除透明度吗？这是我的代码 <InputLabel id="demo-simple-select-label">Client Code</InputLabel>
<Select
style = {{width : '100%'}}
labelId="demo-simple-select-label"
id="demo-s
浏览 27提问于2021-02-09得票数 1
在尝试测试formik字段更改时，我没有得到更新的值
请考虑以下形式
import React from "react";
import { Formik, Form, Field } from "formik";
export function SomeForm({
initialValues = {},
onTextChange,
onTextBlur,
onTextFocus
}) {
return (
<Formik initialValues={initialValues}>
<Form&g
浏览 4提问于2020-11-06得票数 0
回答已采纳
1回答
我有一个js文件，里面有我菜单的路线。 menuConstant.js import PeopleIcon from '@material-ui/icons/People'
export const routers = [
{
title: 'Clients',
to: '/clients',
icon: PeopleIcon, // doesn't work
items: [
{ itemTitle: 'Invoice', itemTo: '/invoice
浏览 12提问于2021-07-05得票数 1
回答已采纳
1回答
如何创建角度材质组件形状的主题？
、、、、
有没有办法在angular材质中创建组件形状的主题？我知道material设计有一个形状概念，允许你为所有的小/中/大组件创建更多的圆角，较少的圆角，甚至是切角。有没有办法在angular材质中实现这一点？
如果不是，那么在angular材质中全局定制组件的最佳方式是什么？假设我想去掉所有<mat-button>上的圆角？
浏览 17提问于2019-07-15得票数 5
回答已采纳
在为<Formik /> 提供的示例中，我们可以使用以下代码访问子程序中的Formik上下文道具：
import React from 'react';
import { Formik } from 'formik';
const BasicExample = () => (
<div>
<h1>My Form</h1>
<Formik
initialValues={{ name: 'jared' }}
onSubmit={(values,
浏览 4提问于2019-12-05得票数 0
回答已采纳
我使用的是angular6 multi-select，它有一个来自ngOnInit上的角服务的对象数组中的项列表，它正在传递到multi-select中：
this.sensorTypes = [
{ label : "Power", value : "P"},
{ label : "Current", value : "C"},
{ label : "Voltage", value : "V"}
]
在默认情况下，我希望在表单加载时在multi-select中设置2个值。为此，我将ng
浏览 1提问于2019-02-21得票数 18
回答已采纳
1回答
我必须要做
const Flex = styled.div`
display: flex;
align-center: center
`
很多时候，我有没有办法通过UI来减少这种情况呢？在公用文件夹中有Flex是常见的吗？还是有一个用于样式组件的UI库？我不想使用一个非常固执己见的UI库，比如引导。
浏览 2提问于2022-05-25得票数 0
我试图将“time”值设置为formik值。
每次单击"ADD“按钮时，都会在reject_log数组中创建一个新对象。
这个初始值传递给formik.
initialValues={{
reject_log: [
{
reject_id: "",
reject_time: "",
reject_status: "",
},
],
}}
见"RejectLogEdit".
return (
浏览 9提问于2022-09-22得票数 1
现在，我有了一个使用此<select multiple="multiple" id="multi-select">的HTML。如何查看id="multi-select"的来源？( asset.js/asset.css/style.css)我在页面中加载了大量的css/js，我不知道在哪里可以找到它。
浏览 1提问于2016-01-08得票数 0
我使用的是来自Material-UI的Autocomplete组件，唯一的问题是我试图将它与formik结合使用，我需要在事件中包含选定的值(在event.target.value中)。
Autocomplete的onChange函数接收3个参数，其中2个是我需要的，即event和在Autocomplete上选择的实际value。
问题是我不能将value设置为event.target.value，event.target.value只是保持不变：
const handleOnChange = (event, { _id }) => {
const eventCopy = {
浏览 0提问于2021-07-23得票数 0
我有一个带有一些input和dropdown元素的简单组件，我正在尝试测试这些元素是否被渲染。通过在我的expect语句中找到元素'input‘。
以下是我在测试文件中尝试的内容：
import React from 'react'
import { shallow } from 'enzyme'
import AddUser from '../Components/AddUser'
describe('AddUser', () => {
let wrapper
let mockFetchDetailsAc
浏览 2提问于2019-05-03得票数 1
1回答
为什么没有显示所有选项？
、、、、
我使用和formik来显示选项。我正试着展示一周七天的名字。但它并没有显示列表中的所有值。以下是我的组件代码：
import { ErrorMessage, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import React from "react";
import Select from "react-select";
const S
浏览 0提问于2020-11-17得票数 1
回答已采纳
1回答
更改材料样式-ui复选框
、、、、
我使用React作为我的项目和styled-component包的样式，但我有问题的样式材料-ui复选框与样式组件。我需要缩小复选框的边框，但我找不到任何材质界面-ui的样式边框宽度。
这是我目前的代码：
const StyledCheckbox = styled(Checkbox)`
svg{
color: #CDCDCD;
font-size: 30px;
}
`
用于样式化复选框组件的svg。我不知道哪个props of svg处理svg的边框宽度。我试过一些props，比如font-weight，border-width，但是它们都不起作用。
代码框按钮：
浏览 4提问于2019-04-08得票数 5
我用的是Formik的资料界面开关。每当我“启用”开关时，它会自动将Formik中的值标记为"true“，当我”禁用“开关时，它会将Formik中的值标记为"false”。
我希望反转UI开关，所以当我的Formik值是"true“时，这个开关会显示一个"false”值。我尝试修改开关上的“选中”值，但没有效果，我也开始使用开关的样式属性。
任何想法都会被采纳，谢谢！
浏览 4提问于2022-06-09得票数 0
3回答
我需要你的帮助。我有一小块代码。我使用材质UI和角度。我有一个带有单选按钮的小组。事实上，单选按钮中的文本不会改变，尽管我将scss值设置为更改为这个颜色：# 262D34。
<mat-radio-group aria-label="Select an option" style="display: flex; flex-direction: column">
<mat-radio-button value="1" class="radio_button">
Roman Dyshko
浏览 7提问于2022-06-03得票数 1
6回答
我似乎在更改Material-UI(用于React)的RaisedButton上的字体大小以及让按钮本身相应地缩放时遇到了问题。 <RaisedButton
label={<span className="buttonText">Log in Here</span>}
/> CSS： .buttonText {
font-size: 63px;
} 文本大小会改变，但按钮本身不会随之缩放。有没有人知道解决这个问题的正确方法？我想要的按钮，以缩放与文本大小。
浏览 67提问于2016-07-06得票数 9
回答已采纳
1回答
用于带工艺路线的角度的材料组件
、、、、
我正尝试在我的angular 4.3应用程序中使用Angular ()的材质组件。我已经安装了所有的东西，并且在我的app.component.html文件中添加了一个按钮，这个按钮被渲染了，并且像这里的一样工作。
然后，我尝试在我的一个路由中添加一个按钮，但该按钮呈现的效果并不相同。这就像是引导css已经接管了一切。
我必须在要路由到的组件中导入任何内容吗？
浏览 0提问于2017-11-14得票数 1
我在Formik表单中有一个使用React制作的selectInput组件。我正在尝试让我的Formik值与返回的值一起更新。做这件事最好的方法是什么？
在我的Formik表格里：
const initialValues = {
firstName: '',
lastName: '',
jobPosition: '',
email: '',
phoneNumber: '',
languages: [],
files: []
};
<SelectI
浏览 7提问于2021-12-03得票数 3
回答已采纳
在材质-UI v0中，TextField可以使用给定的属性进行适当的样式设计。
就像这样；
<TextField
floatingLabelText="New Password"
fullWidth={true}
underlineStyle={styles.dialogInputUnderlineStyle}
underlineFocusStyle={styles.dialogInputUnderlineFocusStyle}
errorStyle={styles.dialogInputErrorStyle}
浏览 0提问于2018-07-06得票数 0
2回答
我正在尝试使用typescript和Formik创建自定义输入字段。我能得到一些关于完成下面代码的最佳方式的帮助吗？我需要添加额外的道具标签和名称...我已经被困在这里有一段时间了，我希望我错过了一些非常容易的东西！
{/* {label && <label htmlFor={name} className="text-input-label">{label}</label>} */}
请看下面代码中的上面一行。
import React from "react";
import styled from "styl
浏览 1提问于2020-09-08得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
