I tried to apply a style to a section using the styled-components module in react.
However, the style was not applied to the section, so I checked it and it is displayed as a div on the console.
// GlobalStyles.tsx
section {
width: 100%;
height: 100%;
display: flex;
}
// Login.tsx
import styled from 'styled-components';
const Section = styled.section`
background-color: #ff69b4;
`;
const SERVER_ENDPOINT = 'http://localhost:3001';
function Login() {
...
return (
<Section>
<form>
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input type="submit" value="Login with Spotify" onClick={handleLogin} />
</form>
<span>{errorMsg}</span>
<Link to="/join">Sign Up</Link>
</Section>
);
}
export default Login;
console html
how should i solve this problem?
Related
I have the following Segment
<Segment className='AddAPIKey'>
<Form>
<Form.Group>
<Form.Field>
<Input placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' />
</Form.Field>
<Form.Button color='green' floated='right' content='Add new API key' />
</Form.Group>
</Form>
</Segment>
With the style:
.ui.AddAPIKey {
display: flex;
justify-content: right;
}
Resulting in:
Is there a way I can make the input field take the entire width like in the example below? I've tried with width: 100% and auto and no luck.
import React from "react";
import { Input, Form, Segment } from "semantic-ui-react";
import "./style.css";
const InputExampleFocus = () => (
<Segment>
<Form>
<Form.Group style={{ display: "flex" }}>
<Form.Field style={{ flexGrow: "1" }}>
<Input placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
</Form.Field>
<Form.Button color="green" floated="right" content="Add new API key" />
</Form.Group>
</Form>
</Segment>
);
export default InputExampleFocus;
Try this I have removed the .ui.AddAPIKey class and used Inline css to style Form.Group and Form.Field
It produces an Input field that covers all the spaces available.
I hope it solves the issue.
https://codesandbox.io/embed/semantic-ui-example-forked-x5d4qm?fontsize=14&hidenavigation=1&theme=dark
Open the codesandbox and go to example.js
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'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}
I'm working with grid css and my form elements doesn't wollow my grid convention.
I can't figure out why it fails since I have followed the grid requirements and ensured that form is itself a grid with two columns inside, one for the input, other for the submit button.
So it seems to me that they should be displayed as inline elements.
Demo here
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: ""
};
onChange = e => {
console.log("e.target.name: ", e.target.name);
this.setState({ [e.target.name]: e.target.value });
};
sendForm = e => {
e.preventDefault();
console.log("form sent: ", this.state.name, this.state.email);
};
render() {
return (
<div className={style.newsletter_grid}>
<h2 className={style.newsletter_headline}> newsletter headline</h2>
<form className={style.newsletter_form} onSubmit={this.sendForm}>
<div className={style.newsletter_input}>
<input
onChange={this.onChange}
name="name"
type="text"
value={this.state.name}
placeholder="name"
/>
<input
onChange={this.onChange}
name="email"
type="text"
value={this.state.email}
placeholder="email"
/>
</div>
<button type="submit" className={style.newsletter_conversion}>
confirmer
</button>
</form>
</div>
);
}
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
My react.css snippet:
.newsletter_grid {
display: grid;
width: 100%;
grid-template-areas:
"headline headline"
"form form";
}
.newsletter_headline {
grid-area: headline;
}
.form {
grid-area: form;
display: grid;
grid-template-areas: "newsletter_input newsletter_conversion";
}
.newsletter_input {
grid-area: newsletter_input;
}
.newsletter_conversion {
grid-area: newsletter_conversion;
}
If someone has any hint, would be great.
thanks.
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.