I have a navigation bar in NextJS which I define as follows:
import { useState } from 'react';
import { TomatoButton } from '#/components/button';
import styled from 'styled-components';
const Head = styled.div`
display: inline-block;
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
display: block;
`;
export default function Navbar() {
return (
<div>
<TomatoButton as="a" href="#">About</TomatoButton>
</div>
);
}
where TomatoButton is defined in a separate file:
import styled from 'styled-components';
export const Button = styled.button`
display: inline-block;
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
display: block;
`;
export const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;
For whatever reason, it does not seem to be rendering properly (the style is not showing up):
However, according to the Styled Component example I followed, it should render differently.
I am wondering if I'm missing something basic?
Related
So I'm following along the tutorial on Youtube about reactJS, and the youtuber told me to import a CSS file into my index.css then it should be properly showing rendering of the website, however, when i copied the CSS and imported into my App.js and Index.js nothing pops up, does anyone know how to deal with this? is the style are different for the versions of react? am I missing any other set up?
here is index.css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task.reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
Here is my App.js and Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Lastly, App.js :
import Header from "./components/Header";
import Tasks from "./components/Tasks";
import './index.css';
function App() {
return (
<div className="Container">
<Header title='Orpheus Research'/>
<Tasks />
</div>
);
}
export default App
The index.css should be imported into the index.js file. So you can just delete the import in the app.js.
Since you import with "./index.css" as the path you need to make sure that the index.css file is in the same folder (I suppose it's the src folder) as the index.js.
Grid area can't be a prop.
=============================
export const Code = styled.input<{area?:String}>`
font-family: Archivo;
font-size: 14px;
font-weight: 500;
text-align: center;
width: 61px;
height: 19px;
outline: none;
border: unset;
grid-area: ${({area})=>area ? area : ''};
background-color: transparent;
`;
and it can't be overriden also:
<Code type='text' placeholder='Code' style={{
gridArea:"nom code !important"
}}
it was just in front of me hhhhh:
export const Code = styled.input<{area?:string}>` // string type with LowerCase S
font-family: Archivo;
font-size: 14px;
font-weight: 500;
text-align: center;
width: 61px;
height: 19px;
outline: none;
border: unset;
grid-area: ${({area})=>area ? area : 'code'}; // added intial value
background-color: transparent;
`;
I need to overlap the left part of the Input using styled-components in React. He will be able to write only after the overlap, on the right part.
Codesandbox is here CLICK HERE
Just like this image below:
const TextInput = styled.input`
font-size: 16px;
padding: 10px 10px 10px 10px;
display: block;
border: 2px solid #e3e5e5;
border-radius: 8px;
height: 28px;
width: 100%;
&:focus {
outline: none;
}
`;
I would push the border styling and layout to the Wrapper component. Add a styled label component.
Code
const Wrapper = styled.div`
width: 100%;
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: row;
border: 2px solid #e3e5e5;
border-radius: 8px;
overflow: hidden;
`;
const InputLabel = styled.label`
background-color: #e3e5e5;
color: gray;
display: flex;
flex-direction: column;
font-size: 16px;
height: 28px;
justify-content: center;
padding: 10px;
width: auto; // <-- can set to specific width for consistency
`;
const TextInput = styled.input`
border-width: 0;
flex: 1;
font-size: 16px;
height: 28px;
padding: 10px;
outline: none;
`;
const TextError = styled.span`
display: block;
font-size: 12px;
color: #ff0000;
line-height: 14px;
font-weight: bold;
margin-top: 11px;
`;
const Input = ({
label,
name,
type = "text",
value = "",
handleChange = () => {},
error = null,
touched = false
}) => {
return (
<div>
<Wrapper>
<InputLabel htmlFor={name}>{label}</InputLabel>
<TextInput
id={name}
name={name}
type={type}
value={value}
onChange={handleChange}
/>
</Wrapper>
{error && touched && <TextError>{error}</TextError>}
</div>
);
};
I tried to recreate same way as in the picture above. For the solution i added extra class to the Wrapper. Does this approach solve your problem? example
const Overlap = styled.span`
width: min-content;
display: flex;
align-items: center;
padding: 0px 60px 0 20px;
border-radius: 8px 0 0 8px;
background-color: hsl(0, 0%, 90%);
color: hsl(195, 2%, 68%);
font-size: 1.2em;
white-space: nowrap;
`;
my button can't compile and the mistake is:"./src/components/Button.js
Line 2: 'React' must be in scope when using JSX react/react-in-jsx-scope". Does anybody know the problem? pls help! Thank you!
"This is my Header.js:
import PropTypes from 'prop-types';
import Button from './Button'
const Header = ({title}) => {
return (
<header className="header">
<h1>{title}</h1>
<Button />
</header>
)
}
Header.defaultProps ={
title:'Task Tracker '
}
Header.propTypes={
title:PropTypes.string.isRequired,
}
// css in js
// const headingStyle = {
// color:'red',
// backgroundColor:'blue'
// }
export default Header
This is my Button.js:
const Button = () => {
return <button className="btn">Add</button>
}
export default Button
My Header.js and Button.js are inside my components folder which is inside my src folder
This is my index.css which is inside my src folder too:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task.reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
try this code :
export const Button = () => {
return <button className="btn">Add</button>
}
import {Button} from './Button'
adding on to Vuk Vucic comment:
Vucic mentioned that you need to import React when using functional components, but as of React 17 (if compiled using babel), top line import React from 'react' is no longer needed. You now only need to import react-specific hooks
like import { useEffect() } from 'react';
However, if it isn't comiled via Babel, you need to import React.
in this case, it looks like you do need to import React from 'react';
helpful article
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
I am having a container which takes in the amount and the currency. As the amount gets bigger and reaches near to the right padding (i.e., 16px), the font size should be reducing. At the same time the top padding of the currency should also change.
https://jsfiddle.net/jmjjeena/uzsL7n0c/
//////////////// REACT /////////////////
class FontSize extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div className='container'>
<div className='subContainer'>
<div className='amount'>$1000000000.00</div>
<div className='currency'>USD</div>
</div>
</div>
)
}
}
ReactDOM.render(<FontSize />, document.querySelector("#app"))
//////////////// CSS /////////////////
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#app {
background: white;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.container {
background-color: white;
box-sizing: border-box;
border: 1px solid red;
border-radius: 5px;
width: 316px;
height: 81px;
}
.subContainer {
display: flex;
flex-direction: row;
padding: 16px 16px 12px 28px;
}
.amount {
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 40px;
color: black;
padding-right: 8px;
}
.currency {
padding-top: 17px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 18px;
color: black;
}
You can make the css dynamics, e.g. something like this:
<div style={fontStyle(1)} />
fontStyle= function(fontSze) {
return {
font-size:fontSze
}
}
You will need to add the logic based on the amount changing. You can update the variable via props and put the logic to update it within the componentDidMount()