I got a redux form, which looks pretty bad. I want to style it somehow, but my project uses modular css loaders. It looks like:
import styled from 'styled-components';
const Input = styled.input`
color: #41addd;
&:hover {
color: #6cc0e5;
}
`;
export default Input ;
Then I have to import it into a component which where I want to use that Input element.
But redux-form uses a build in component called Field.
import { Field, reduxForm } from 'redux-form';
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
And if I would replace Field with my customly styled Input, the form doesn't work any longer.
How can I deal with it? How can I style the Field component?
Thank you.
The styled-components have special functional for that case. Your example will be like so:
import styled from 'styled-components';
import { Field, reduxForm } from 'redux-form';
const StyledField = styled(Field)`
color: #41addd;
&:hover {
color: #6cc0e5;
}
`;
<StyledField
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
Related
Consider the following input component with its own scss file:
import React from "react";
import "./InputBox.scss";
const InputBox = () => {
return (
<div>
<label for="fname">First name: </label>
<input className="input-box" type="text" id="fname" name="fname" />
</div>
);
};
export default InputBox;
.input-box {
background-color: blue;
}
import React from "react";
import InputBox from "./InputBox";
export default function App() {
return (
<div className="App">
<div>The blue input box</div>
<InputBox />
<div>The green input box</div>
<InputBox />
</div>
);
}
Working example here
The functionality is okay, my question is with the styling: say I want a green input box, it doesn't seem possible with the external SCSS file. I can pass a className as a props but I feel it's a overkill. I feel my component should not contain any style, and only apply style when using it. How can I style the same component differently?
depending on the project I usually pass a variant prop which will determine the element's styling, so for example you have a default styling for an input field but you do have so different variants of the input with its own unique styling. So all you can do is pass a variant which will add a modifier block to your class name.
default classname = 'input'
depending on the variant the entire class name should be something like 'input input--variant-name'
all default styling go to the 'input' class name while the variant makes the changes. I feel it isn't an overkill as it is much more organized this way and with a use of a scss and css variables together you make have a very organized project structure for your styling.
you can do it by using useRef hook,here is the live demo link:https://codesandbox.io/s/romantic-ride-j0hdp?file=/src/App.js
this way you wont be requiring any css file.
I tried to pass className as a prop and it worked, code here:
const InputBox = ({ color }) => {
return (
<div>
<label for="fname">First name: </label>
<input
className={"input-box-" + color}
type="text"
id="fname"
name="fname"
/>
</div>
);
};
.input-box {
&-blue {
background-color: blue;
}
&-green {
background-color: green;
}
}
export default function App() {
return (
<div className="App">
<div>The blue input box</div>
<InputBox color={"blue"} />
<div>The green input box</div>
<InputBox color={"green"} />
</div>
);
}
I can see a few problems already:
When design a component, should I consider all possible style changes and design them as props? If yes, then every time using the component requires writing all props, which is cumbersome. If no, adding a prop requires modifying the component.
I have made a separate useStyle file and want to use this custom css in useStyle of material ui. How to achieve that?
input[type="checkbox"],
input[type="radio"] {
display: none;
}
Let's say your useStyles file looks something like this:
import makeStyles from "#material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
hideCheckboxAndRadio: {
"& input[type='checkbox'], & input[type='radio']": {
display: "none"
}
}
});
export default useStyles;
Back on your components, just import this file and attach it to a parent where you want all of its children input of type radio & checkbox to be hidden
import useStyles from "./useStyles";
function App() {
const classes = useStyles();
return (
<div className={classes.hideCheckboxAndRadio}>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
</div>
);
}
how to make post action in react hook form similar to the HTML submit form, in HTML when you submit form and it goes to the next with passing the value according to the name. I want to do the same thing, with react hook form. how I cant do that thank you
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useForm } from "react-hook-form";
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
import { formatPhoneNumber } from 'react-phone-number-input'
//import InputNumber from 'react-input-number';
import MuiPhoneNumber from 'material-ui-phone-number';
import { Textbox, Radiobox, Checkbox, Select, Textarea } from 'react-inputs-validation';
import 'react-inputs-validation/lib/react-inputs-validation.min.css';
//import updateAction from "./updateAction";
function App(props) {
const { register, handleSubmit, watch, errors,action} = useForm();
const [value, setValue] = React.useState("");
const [num, setNum] = React.useState(2.2);
const onSubmit = data => {
};
return (
<form onSubmit={handleSubmit(onSubmit)} action="www.example.com" method="POST" >
<label></label>
<input placeholder="Ad" name="example" defaultValue="test" ref={register} style={{border: "1px solid black"}}/>
<input name="email" placeholder="email" ref={register({
required: "Required",
pattern: {
value: /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "invalid email address"
}
})} style={{border: "1px solid black"}}
/>
<MuiPhoneNumber defaultCountry={'us'} />
<input
name="exampleRequired1"
style={{border: "1px solid black"}}
/>
<button type="submit" name="submit" value="submit">Submit</button>
</form>
);
}
export default App;
I am trying to use reactstrap for a react project yet not successful. Here is the code.
// React
import React, { Component } from "react";
import {
Card,
CardBody,
CardTitle,
Row,
Col,
InputGroup,
InputGroupAddon,
InputGroupText,
Input
} from "reactstrap";
// Style
import "./App.scss";
class App extends Component {
render() {
return (
<div className="App">
<Card>
<CardBody>
<CardTitle>Badges Scale to Parent</CardTitle>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Input
addon
type="checkbox"
aria-label="Checkbox for following text input"
/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Check it out" />
</InputGroup>
<input placeholder={"email"} />
<input placeholder="name" />
<input placeholder="mail" />
<button>Send</button>
</CardBody>
</Card>
</div>
);
}
}
I have hosted the app on codesandbox and here is the link. I am expecting the look of the inputs to be exactly as the documentation but when implemented they look like regular input fields without any style. Here is the documentation page for reactstrap link. What am I missing?
On the documentation, the first page says to import the Bootstrap CSS.
Import Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
This gives you the styles. Preview here.
CodeSandbox: https://codesandbox.io/s/client-x8dz3
I'm using Filter Input from blueprintjs in a reactjs project, but the style doesn't load correctly, here's my code:
Assigning.jsx
import './Assigning.scss';
export default class Assigning extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
Assigning.scss
#import '~#blueprintjs/core/lib/css/blueprint.css';
#import '~#blueprintjs/icons/lib/css/blueprint-icons.css';
is ~ character required at the beginning of import ?
It works with me with the following imports
import "#blueprintjs/table/lib/css/table.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
The full code for the component is
import React, { Component } from 'react';
class TestComponent extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
export default TestComponent;
I got the following output