I would like to put style on the "Forms_formline__3DRaL" div (seen below)
This div comes from a component; and it seems like this style is applied to the input , and not its parent div.
How can I, though reactjs, define the style "display: none" for the parent div?
Here is my code:
<MyInput
style={{
display:
type == 1
? 'none'
: 'block',
}}
id="name"
type="text"
label={t('elevation_loss')}
value="name"
/>
Here is the result in my chrome source:
<div class="Forms_formline__3DRaL">
<label for="name">Name *</label>
<input type="text" id="name" value="" style="display: none;">
</div>
You can try doing something like this
import { CSSProperties, FC } from 'react';
export const MyInput: FC<{
styleOverrides: {
container: CSSProperties;
};
id: string;
type: string;
label: string;
}> = ({ styleOverrides }) => {
return (
<>
<div className="Forms_formline__3DRaL" style={styleOverrides.container}>
...
</div>
</>
);
};
Related
I'm new to React so don't know where does this problem come from.
I'm using ReactModal imported from "react-modal" as the container of my form.
And the leading text cannot be in the same line as the input field.
I think this might be caused by in-built style from ReactModal?
Here's the code snippet
import { useState } from "react";
import ReactModal from "react-modal";
export default function GitModal() {
const [state, setState] = useState(false);
const handleOpenModal = () => {
setState(true);
};
const handleCloseModal = () => {
setState(false);
};
const data = {
name: "HarryPotter",
type: "book",
date: "20220202",
description: "bought in UK",
specialAttribute: "VerySpecial",
itemID: "123123",
};
return (
<div>
<button onClick={handleOpenModal}>Trigger Modal</button>
<ReactModal
isOpen={state}
contentLabel="Minimal Modal Example"
data={data}
>
<form id="login">
<label>
Name:
<input
type="text"
className="input-field"
required
defaultValue={data.name}
/>
</label>
<label>
Description:
<input
type="text"
className="input-field"
required
defaultValue={data.description}
/>
</label>
<button type="reset">Save Changes</button>
</form>
<button onClick={handleCloseModal}>Close Modal</button>
</ReactModal>
</div>
);
}
Here's the effect of the code: the 'Name' and 'HarryPotter' is not in same line
And I want it to be like:
Name: HarryPotter (in same line)
you can do the following on your css:
label {
display: inline-block;
text-align: right;
}
and your <label/> tag is wrapping the input as well. the correct is as it follows:
label {
display: inline-block;
text-align: right;
}
<label>
Name:
</label>
<input
type="text"
className="input-field"
required
value="Harry Potter"
/>
I'm trying to target the span, but haven't been able to do so. I want to be able to change the background color of the span when the checkbox is checked.
<div className={classes.container}>
<input type="checkbox" id="checkboxid" />
<label className={classes.label} htmlFor="checkboxid">
<span className={classes.labelText}>Target</span>
</label>
</div>
container: {
'& input:checked': {
'& label': {
'& $labelText': {
background: 'red'
}
}
}
}
While label is not inside the input but a sibiling you need to make use of the css sibling selector +
In your context
const useSpanStyles = makeStyles({
container: {
'& input:checked + label': {
'& span': {
background: 'red'
}
},
},
label: {},
labelText: {}
});
export function ComponentXYZ(){
const classes = useSpanStyles();
return (
<div className={classes.container}>
<input type="checkbox" id="checkboxid" />
<label className={classes.label} htmlFor="checkboxid">
<span className={classes.labelText}>Target</span>
</label>
</div>
);
}
To be honest with you, if you are using MUI you should've used their components as its easier to compose and build UI with
Here's my suggestion
function ComponentXYZ(){
const [checked, setIsChecked] = useState(false);
const checkedHandler = useCallback(function _checkedHandler(event: any) {
setIsChecked(event.target.checked);
}, []);
return (
<div>
<FormGroup>
<FormControlLabel
control={<Checkbox
checked={checked}
onChange={checkedHandler}
/>}
label={
<Typography style={{ background: checked ? 'red' : 'inherit' }}>
{'Label That change color'}
</Typography>
}
/>
</FormGroup>
</div>
);
}
I've a react app, which has several modules.
For one module, the css or scss doesn't apply.
all other modules does apply the scss. I've changed already from css to scss but doesn't work.
I've tried also to use !importent at the background, but in the developer console, the scss doesnt appear at all. Like scss is not found.
App.js
import React, {useEffect, useState} from 'react'
import './App.scss'
import EditView from "../editView/editView";
return (
//some other html stuff
<div className="app_editContent">
<EditView action={actionToPerform}/>
</div>
)
EditView.js
import React from 'react';
import './editView.module.scss';
import {faSave, faStopCircle, faSun} from "#fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "#fortawesome/react-fontawesome";
export default class EditView extends React.Component {
constructor(props) {
super(props);
}
showTitle() {
return (
this.props.action === "new" ? (
[
<div className="edit_container">
<div className="edit_newListTitle">Neue Shoppingliste erstellen</div>
<label className="edit_titleInputLabel">Titel</label>
<input type="text" className="edit_titleInput" name="title"></input>
<label className="edit_locationInputLabel">Ort</label>
<input type="text" className="edit_locationInput" id="location" value=""></input>
<label className="edit_priorityInputLabel">Wichtigkeit</label>
<input className="edit_priorityInput" type="range" id="priority"
min="1" max="5" step="1"></input>
<label className="edit_toDoDateInputLabel">Erledigen bis</label>
<input className="edit_toDoDateInput" type="datetime-local" id="date"></input>
<input className="edit_amountInput" type="number" id="quantity" name="quantity" min="1"
value="1"></input>
<input className="edit_itemInputLabel" type="text" id="item" value=""></input>
<button className="edit_buttonSave"><FontAwesomeIcon icon={faSave}/></button>
<button className="edit_buttonCancel"><FontAwesomeIcon icon={faStopCircle}/></button>
</div>
]
) : this.props.action === "edit" ? (
<div>edit</div>
) : (
<div>nothing to show</div>
)
)
}
actionToPerformChange = (val) => {
this.setState({actionToPerform: val});
this.forceUpdate()
}
render() {
return (<div>
<button onClick={() => this.actionToPerformChange('new')}>Create new Shoppinglist</button>
<button onClick={() => this.actionToPerformChange('edit')}>Edit Shoppinglist</button>
{this.showTitle()}
</div>
)
}
}
editView.module.scss
.edit_container {
height: 100%;
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: auto;
background: yellow !important;
}
The other scss modules are build the same way but they do work.
I've found the answer shortly after posting. If using classNames need to define it in {} like :
className={styles.edit_container}
Hi i am new to react and i need to Create a login page with background image, i created a new login component and i called i the app.js, now if i write any css property it wil affect only the login component but i need background image as full cover.
expected output
current image
My app.js code is:
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + ( Background ) + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Login />
</div>
);
}
}
My login.js code is:
render() {
const { errors, formSubmitted } = this.state;
return (
<div className="Login" style={divStyle}>
<Row>
<form onSubmit={this.login}>
<FormGroup controlId="email" validationState={ formSubmitted ? (errors.email ? 'error' : 'success') : null }>
<ControlLabel>Email</ControlLabel>
<FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />
{ errors.email &&
<HelpBlock>{errors.email}</HelpBlock>
}
</FormGroup>
<FormGroup controlId="password" validationState={ formSubmitted ? (errors.password ? 'error' : 'success') : null }>
<ControlLabel>Password</ControlLabel>
<FormControl type="password" name="password" placeholder="Enter your password" onChange={this.handleInputChange} />
{ errors.password &&
<HelpBlock>{errors.password}</HelpBlock>
}
</FormGroup>
<Button type="submit" bsStyle="primary">Sign-In</Button>
</form>
</Row>
</div>
)
}
}
Any help would be useful.
I tried to get your expected output . It works for me . under content of the page.
import img from "../../assets/img/logo(name).svg";
render() {
return (
<div className="content" style={{ overflow: "auto"}}>
<img id="logo-img" src={img} alt="logo" />
</div>
)
}
I fail to create a vertical direction with my flexbox.
Demo here.
Despite I have create a grid specifically to direct them vertically. I can't figure out why it fails.
I have tried with flexbox basis using direction property but it fail.
Here my react.js snippet:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./styles.css";
class App extends Component {
state = {
name: "",
email: "",
message: ""
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
sendForm = e => {
e.preventDefault();
console.log(
"form sent: ",
this.state.name,
this.state.email,
this.state.message
);
};
render() {
return (
<div>
<form className={style.mailform_container} onSubmit={this.sendForm}>
<div>
<input
className={style.mailform_name}
onChange={this.onChange}
name="name"
type="text"
value={this.state.name}
placeholder="name"
/>
<input
className={style.mailform_email}
onChange={this.onChange}
name="email"
type="text"
value={this.state.email}
placeholder="email"
/>
<textarea
className={style.mailform_message}
onChange={this.onChange}
name="message"
type="text"
value={this.state.message}
placeholder="message"
>
Enter text here...
</textarea>
</div>
<button type="submit" className={style.mailform_confirm}>
Envoyer
</button>
</form>
</div>
);
}
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
Here my style.css snippet:
.mailform_container {
display: grid;
grid-template-areas:
"name"
"email"
"message"
"confirm";
}
.mailform_name {
grid-area: name;
}
.mailform_email {
grid-area: email;
}
.mailform_message {
grid-area: message;
}
.mailform_confirm {
grid-area: confirm;
}
.nmailform_confirm:hover {
cursor: pointer;
}
.nmailform_confirm:active {
background-color: rgb(200, 198, 196);
}
Any hint would be great,
thanks
When using grid, all elements you want to be placed by the grid need to be a direct child of the grid. In your case, you have a <div> element as the first child which wraps all the other form elements, so the form elements are not part of the grid. If you remove the <div>, your example will work.