Why inline styling doesnt work in react on components?I dont understand why this is not working.I know is possible to make it different ways.(with css files for example).Im just corius.The intellisense does not help by inline styling either.Its strange..
import "./App.css";
import Button from "./components/Button";
function App() {
return (
<div className="App" >
<Button style={{fontSize:"50px"}} />
</div>
);
}
export default App;
//this is from Button components
import React from "react";
const Button = () => {
return (
<div>
<button>
Change
</button>
</div>
);
};
export default Button;
You need to pass the style property to the Button component:
const Button = ({style}) => {
return (
<div>
<button style={style}>
Change
</button>
</div>
);
};
Related
import "./styles.css";
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
export default function App() {
const handle = useFullScreenHandle();
return (
<div className="App">
<FullScreen handle={handle}>
<div className="App__inner">
<h1>Hello CodeSandbox</h1>
<button onClick={handle.enter}>Click to FullScreen</button>
<Popover placement="right" content={<span>tooltip</span>}>
<button>hover me</button>
</Popover>
</div>
</FullScreen>
</div>
);
}
The problem is Popover doesnt work when i make App__inner component fullscreen. I have reproduced the issue here codesandbox. Please suggest any fix or alternatives
I was expecting the Popover to work as expected in fullscreen mode
The default behavior of Popover is to create a div element in body , so when you do fullscreen the div is hidden. What you need to do is make use of getPopupContainer API of Popover and set the container body inside FullScreen for your Popover to be visible.
import "./styles.css";
import React from "react"
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
export default function App() {
const handle = useFullScreenHandle();
const containerRef = React.useRef(null);
return (
<div className="App" >
<FullScreen handle={handle}>
<div className="App__inner" ref={containerRef}>
<h1>Hello CodeSandbox</h1>
<button onClick={handle.enter}>Click to FullScreen</button>
<Popover getPopupContainer={() => containerRef.current} placement="right" content={<span>tooltip</span>}>
<button>hover me</button>
</Popover>
</div>
</FullScreen>
</div>
);
}
I want to change the width of a component whenever I click a button from another component
This is the button in BiCarret:
import { useState } from "react";
import { BiCaretLeft } from "react-icons/bi";
const SideBar = () => {
const [open, setOpen] = useState(true);
return (
<div className="relative">
<BiCaretLeft
className={`${
open ? "w-72" : "w-20"
} bg-red-400 absolute cursor-pointer -right-3 top-5 border rounded-full`}
color="#fff"
size={25}
onClick={setOpen(!true)}
/>
</div>
);
};
export default SideBar;
and this is the component I want to change the width on click
import "./App.css";
import SideBar from "./components/SideBar/SideBar";
function App() {
return (
<div className="app flex">
<aside className="h-screen bg-slate-700"> // change the width here
<SideBar />
</aside>
<main className="flex-1 h-screen"></main>
</div>
);
}
export default App;
You have two simple solutions, either:
Create context
Crete context and store Open value in it, change it on click and in App react to it.
Dom manipulation
In app add ID to element you would like to change and onClick in the other component use document.getElementById(THE_ID).classList.add("new-class-for-increased-width") which gets the DOM element and adds class to it.
I've set an example here : https://codesandbox.io/s/lucid-morning-bd8nn0
I've trying using "this." but I can't found method to do this.
I don't want to extend Label component and implement a homemaid method to do this.
I'm expecting to found a solution using native REACT / semantic-ui method to do this.
Below my code and I'd like to update Label component itself at onClick event.
import "./styles.css";
import { Label } from "semantic-ui-react";
export default function App() {
return (
<div className="App">
<Label
as="a"
color="green"
tag
onClick={(e) => {
// I'd like to update the text of this LABEL
// any idea to do this ?
}}
>
Click here to change text
</Label>
</div>
);
}
Any idea ?
Thanks for your help.
You can use local state to accomplish that:
import "./styles.css";
import { Label } from "semantic-ui-react";
import { useState } from "react";
export default function App() {
const [labelText, setLabelText] = useState("Click here to change text");
return (
<div className="App">
<Label
value="XXXXX"
as="a"
color="green"
tag
onClick={(e) => {
setLabelText("updated text");
}}
>
{labelText}
</Label>
</div>
);
}
hope you all doing well, i am very new in react and i was following the guide, but got stuck with this strange problem while I import { Button} from './Button'. Ill provide the full code :
import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';
function HeroSection() {
return (
<div className='hero-container'>
<div className="hero-btns">
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'>Get Started</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'>Checkout Events
<i className='far fa-play-circle' /></Button>
</div>
</div>
)
}
export default HeroSection
Here is a Button.js code also:
import React from 'react';
import './Button.css';
import {Link} from 'react-router-dom';
const STYLES= ['btn--primary', 'btn--outline'];
const SIZES= ['btn--medium', 'btn--large'];
export const Buttom =({children, type, onClick, buttonStyle,
buttonSize}) => {const checkButtonStyle=
STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize :
SIZES[0]
return(
<Link to='/Login' className='btn-mobile'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
)
};
Already Tried to put Button without {}, and tired to export default Button but it didn't fixed it at all :(
if the above is the exact Button.js file you've used
then it's just a typo, change Buttom to Button at line 7, and you're good to go
Apart from that, you can simply export the Button as default
By adding this line
export default Button;
then you'll have to import it like
import Button from './Button';
I made a sample code for you with Button Example.
Here is the App.js file
import "./styles.css";
import Button from "./Button";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button btnText="I'm a Button" />
</div>
);
}
Here is the Button Component.
function Button({ btnText }) {
return (
<div>
<button>{btnText}</button>
</div>
);
}
export default Button;
here is the codesanbox example
Here is how it looks.
I try to create my own react component library based on tailwind CSS.
I start with a simple button component
import * as React from 'react'
interface Props {
text: string
onClick?(): any
}
export const Button = ({ text, onClick }: Props) => {
return (
<button onClick={onClick} className='bg-primary-500 rounded-md'>
{text}
</button>
)
}
I push it on npm : https://www.npmjs.com/package/tailwind-lib-quentin
Then I create a simple React app that use this package
import "tailwind-lib-quentin/dist/index.css";
import { Button } from "tailwind-lib-quentin";
function App() {
return (
<div className="App">
<Button text="Test" onClick={() => console.log("ok")} />
<div className="w-full h-40 bg-primary-500">Bonjour</div>
</div>
);
}
export default App;
as you can see I import the css of my package that extend tailwind but my components are not styled at all.
The button work but I can't see any style on it and I don't get any errors.
Here is reproductible example on Codesandbox : https://codesandbox.io/s/frosty-sea-1y879
here is the package repository : https://github.com/quentin-bardenet/tailwind-lib-quentin