I'm using react-phone-number-input. This is the phone number field:
<PhoneInput
defaultCountry={"CA"}
placeholder={"Phone"}
value={phone}
onChange={(value: string) => {
setPhone(value);
}}
/>
and the css style from:
https://gitlab.com/catamphetamine/react-phone-number-input/-/blob/master/style.css
I set the border and outline of PhoneInputInput to none but it not working when focus.
.PhoneInputInput:focus-visible {
flex: 1;
min-width: 0;
border: none;
outline: none;
}
Here's the image of this field:
It seems to be caused by the default input of reactjs. I added this to the globals.css file:
.input-phone-number input:focus{
outline: none !important;
border:none !important;
box-shadow: none !important;
}
and use it in the PhoneInput field, then it worked for me:
<PhoneInput
defaultCountry={"CA"}
placeholder={"Phone"}
value={phone}
onChange={(value: string) => {
setPhone(value);
}}
className={"input-phone-number"}
/>
I have validation that displays an error message, how to make the input border red when the form is incorrectly filled?
<div className={styles["form-group"]}>
<label>
Temat
</label>
<input
{...register("temat", { required: ErrorType.REQUIRED })}
className={styles.input}
/>
<p className={styles.invalid}>{errors?.temat?.message}</p>
</div>
how will i use it:
style={{ border: errors.temat?.message ? '1px solid red' : '' }}
the input turns red after clicking the submit button
Try to change mode on useForm. It works for me.
useForm({
mode: 'onChange',
...
})
Add a className for errors on the input element:
<div className={styles["form-group"]}>
<label>
Temat
</label>
<input
{...register("temat", { required: ErrorType.REQUIRED })}
className={`${styles.input} ${styles.errors}`}
/>
<p className={styles.invalid}>{errors?.temat?.message}</p>
</div>
or look use a library like classnames
A: You have to use conditional classes
className={ errors?.myInput?.message ? styles["error"] : "no-error" }
in this example I am using scss modules so i'll type the classNames as follow styles["myClassName"]
<input
id="accountReference"
className={
errors?.accountReference?.message ? styles["error"] : "no-error"
}
{...register("accountReference", {
required: "Account reference is required",
})}
/>
scss
input {
border-radius: 8px;
background-color: var(--100);
border: 2px solid var(--300);
padding: 8px 12px;
&.error {
border: 2px solid var(--error);
}
}
or you could do it in css
input {
border-radius: 8px;
background-color: black;
border: 2px solid black;
padding: 8px 12px;
}
input.error {
border: 2px solid red;
}
I have a slight problem with Material UI input, I want to change the design of it using styled components, but I came across an issue. This is my code:
import React from "react";
import styled from "styled-components";
import Input from "#mui/material/Input";
import InputAdornment from "#mui/material/InputAdornment";
import { BiSearch } from "react-icons/bi";
const InputContainer = styled(Input)`
width: 350px;
height: 42px;
border-radius: 2px;
border: 1px solid #c0c0c0;
`;
const SearchIcon = styled(BiSearch)`
color: #c0c0c0;
margin-left: 14px;
`;
const InputComponent = ({ placeholder, type }) => {
return (
<div>
<InputContainer
placeholder={placeholder}
startAdornment={
type === "Search" ? (
<InputAdornment position="start">
<SearchIcon size="20" />
</InputAdornment>
) : (
""
)
}
/>
</div>
);
};
export default InputComponent;
What I want to do:
Change placeholder size
When user hovers or clicks on input there is no bottom border like there is now, basically I want to remove bottom border
How do I achieve this?
Change placeholder size
For this, you can target the input element and change the font size. e.g.
const InputContainer = styled(Input)`
width: 350px;
height: 42px;
border-radius: 2px;
border: 1px solid #c0c0c0;
input::placeholder {
font-size: 20px;
}
`;
When user hovers or clicks on input there is no bottom border like
there is now, basically I want to remove bottom border
For this, you can use the disableUnderline prop. e.g the updated code will be
<InputContainer
placeholder={placeholder}
disableUnderline
startAdornment={
type === "Search" ? (
<InputAdornment position="start">
<SearchIcon size="20" />
</InputAdornment>
) : (
""
)
}
/>
I am working on a React project, where I have been using Bootstrap for front-end. I have integrated Autocomplete library from Material-UI.
#ref: https://material-ui.com/components/autocomplete/
Problem: I am trying to integrate form-control class inside the input tag. But it's not working.
Tried:
<Autocomplete
id="combo-box-demo"
options={this.props.customers}
onChange={(_, value) => {
console.log(value);
}}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input
className="form-control"
placeholder="Search by client name"
type="text"
{...params.inputProps}
/>
</div>
)}
/>
Result
Expectation
I ended up having a solution with CSS. I copied the css code of .form-control class and put in combo-box-demo ID.
input#combo-box-demo {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
I'm using webpack, react-datepicker and have managed to import its css with the provided css module.
import 'react-datepicker/dist/react-datepicker-cssmodules.css
The component looks fine and dandy, but now I want to make it full width like the time element above it.
Looking at the CSS, what it needs is for the react-datepicker-wrapper element that gets dynamically added by the library to have display: block. Any modifications I make to react-datepicker-wrapper in my own css does nothing.
What should I do?
date-picker.component.jsx
import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import './date-picker.component.bootstrap.css';
// eslint-disable-next-line no-confusing-arrow
const buildClassNames = (touched, isInvalid) =>
touched && isInvalid ? 'form-control is-invalid' : 'form-control';
export const DatePickerBootstrap = (props) => {
const { setFieldValue, setFieldTouched, errors, touched } = props;
const { name, value, label, ...rest } = props;
return (
<div className="form-group">
<label className='datePickerLabel' htmlFor={name}>{label}</label>
<DatePicker
selected={value}
onChange={(e) => {
setFieldValue(name, e);
setFieldTouched(name);
}}
className={buildClassNames(touched, !!errors)}
customInput={
<input
type="text"
id={name}
placeholder={label} />
}
{...rest}
/>
<div className="invalid-feedback">
{errors}
</div>
</div>
);
};
export default DatePickerBootstrap;
From https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903
Try with wrapperClassName property:
<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />
CSS:
.datePicker {
width: 100%;
}
This way you won't modify the styles for the whole app
styled-components bonus:
import React from 'react';
import styled, { css, createGlobalStyle } from 'styled-components';
import DatePicker from 'react-datepicker';
const DatePickerWrapperStyles = createGlobalStyle`
.date_picker.full-width {
width: 100%;
}
`;
<>
<DatePicker wrapperClassName='date_picker full-width' />
<DatePickerWrapperStyles />
</>
I think you're just missing some CSS. Try this in your custom stylesheet (anywhere after the datepicker's stylesheet):
.react-datepicker-wrapper,
.react-datepicker__input-container,
.react-datepicker__input-container input {
display: block;
width: 100%;
}
Demo
styled-components
<>
<DatePickerWrapper
popperContainer={Popper}
calendarContainer={Calendar}
/>
</>
const DatePickerWrapper = styled(({ className, ...props }) => (
<DatePicker {...props} wrapperClassName={className} />
))`
width: 100%;
`;
const Calendar = styled.div`
border-radius: 10px;
box-shadow: 0 6px 12px rgba(27, 37, 86, 0.16);
overflow: hidden;
`;
const Popper = styled.div`
position: absolute;
top: 0;
left: 0;
z-index: 2;
`;
You can get your css work by putting !important at the end of the lines:
display: block !important;
And, you should import your css file at the end:
import 'library0.css';
import 'library1.css';
import 'library2.css';
import 'yourCss.css'; // Your css
overwrite the default css like
.react-datepicker__input-container input {
width: 100%;
}
working example
You can put it inside a flexbox.
If you are using bootstrap, you can use the d-flex and flex-column classes on the wrapper element.
<div className="d-flex flex-column">
<DatePickerField name="date" label="Date" />
</div>
If not, you can style the wrapper using CSS properties.
<div className="date-picker-wrapper">
<DatePickerField name="date" label="Date" />
</div>
CSS:
.date-picker-wrapper {
display: flex !important;
flex-direction: column !important;
}
You can add to the style sheet:
.react-datepicker__input-container{
input{
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-moz-padding-start: calc(0.75rem - 3px);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
appearance: none;
}
}
Output
You can use the class of each element of the picker to override its default style, using the inspect tool you can identify each element's class, if your new style won't be applied you can use the !important property to override the default style
The following code is applied to most of the pickers elements
.react-datepicker__triangle {
display: none;
}
.react-datepicker__day.react-datepicker__day--keyboard-selected {
border: none;
border-radius: 7px;
background-color: var(--dark);
color: var(--white);
}
.react-datepicker__day.react-datepicker__day--keyboard-selected:hover {
border: none;
border-radius: 7px;
background-color: var(--dark);
color: var(--white);
}
.react-datepicker-popper .react-datepicker__navigation {
padding-top: 12px;
color: #000;
}
.react-datepicker {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.189);
border: none !important;
font-family: "Inter" !important;
}
.react-datepicker__header {
border-bottom: solid 5px var(--light) !important;
background: white !important;
}
.react-datepicker__current-month {
color: var(--dark) !important;
}
.react-datepicker__day.react-datepicker__day--today {
border-radius: 7px;
border: solid 2px var(--brand) !important;
background-color: white !important;
color: var(--dark) !important;
width: 30px;
height: 30px;
}
.react-datepicker__day.react-datepicker__day--selected {
border: none;
border-radius: 7px;
background-color: black;
color: white;
}
.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
border: none;
border-radius: 7px !important;
background-color: var(--brand) !important;
color: var(--dark) !important;
}
From https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903
Try
<DatePicker calendarClassName={/* styles */}></DatePicker>