I'm writing a personal Electron project with React-Bootstrap and Typescript but I can't put two radio controls next to each other. I followed the React-Bootstrap examples but it won't work. I'm not sure if it's just me or if I'm missing something. I also tried giving the inline props to the Form component, and writing it without the Container and Row components as well. I know it can be done playing around with the flex structure in Bootstrap but I'd rather stick to the React-Bootstrap components only.
import React from 'react';
import { Container, Row, Form } from 'react-bootstrap';
const ExperimentTypeForm = () => {
return (
<Container fluid>
<Row>
<Form>
<div key="inline-radio" className="mb-3">
<Form.Check inline label="1" type="radio" id="inline-radio-1" />
<Form.Check inline label="2" type="radio" id="inline-radio-2" />
</div>
</Form>
</Row>
</Container>
)
}
export default ExperimentTypeForm;
I was missing the .css import from Bootstrap:
import 'bootstrap/dist/css/bootstrap.min.css';
At first I ignored it because I couldn't get it to compile due to some missing configuration in my webpack config file. But after some digging I found this great answer on how to add the Bootstrap stylesheet to the App.tsx component.
Related
So basically i have a react application that i am creating and in it i have a page in which i am using the react-bootstrap library to create certain compnents.
Here i have a react regigtration form with bootstrap components and i have already installed all the libraries and this code works fine but the problem lies in the fact that when i run the page the styles dont show even though i have imported:
import "bootstrap/dist/css/bootstrap.min.css";
So if there is any way this can be fixed please do let me know.
Thanks!
Here is the code for react page:
import React from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import "bootstrap/dist/css/bootstrap.min.css";
const UploadBussiness = () => {
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Select defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Row>
<Form.Group className="mb-3" id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
)
}
export default UploadBussiness
There could be other issues, but according to react-bootstrap document, perhaps try include this import in App.js instead of the component file:
The following line can be included in your src/index.js or App.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
I find the new React Docs (Beta) much more readable and helpful than the old React Docs. From the new React Docs (Beta):
React does not prescribe how you add CSS files. In the simplest case,
you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
So what John Li says in his answer is correct; he is directly quoting the React Bootstrap docs. However, you might also try adding the CSS directly to your HTML, which the React Bootstrap docs also recommends:
How and which Bootstrap styles you include is up to you, but the
simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
If this works, then you'll also have a version of Bootstrap specified, which might be helpful to you later.
EDIT: I forgot to emphasize that, as the React Docs (Beta) recommends, you should consult the docs of whatever build tool (e.g. Vite) or framework (e.g. Create React App) you are using. If you aren't using a build tool or a framework, you're sort of on your own.
When I use element-plus to create an icon component, I use unplugin-icons and unplugin-auto-import to automatically import icons, for example I use <el-icon><i-ep-monitor />< /el-icon> to import an icon component. Now I have a requirement, I have an array which stores some strings like ['i-ep-avatar', 'i-ep-cellphone', 'i-ep-apple'], now what can I pass The method converts the strings in this array into components and dynamically adds them to the vue template. I hope to get your help.
<template>
<el-icon>
<i-ep-monitor />
</el-icon>
</template>
When I write like this, it can be imported normally
<template>
<el-icon>
{How should I dynamically generate a component like <i-ep-monitor /> from the string content in the array?}
</el-icon>
</template>
You can use <component> for that
details: https://vuejs.org/api/built-in-special-elements.html#component
example:
<template>
<el-icon>
<component :is="myIcon"/>
</el-icon>
</template>
where myIcon would return a string like i-ep-monitor
Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern
Acutally i want it to look something like how the react-bootstrap claims their carousel looks like :
Like this:
My code snippet is as follows
<Carousel pause="hover">
{product.images &&
product.images.map((image) => (
<Carousel.Item key={image.public_id}>
<img
className="d-block w-100"
src={image.url}
alt={product.title}
/>
</Carousel.Item>
))}
</Carousel>
I think the problem comes from your css. Did you put the bootstrap one ?
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)
I would like to apply the style to Formik's tag for react. How can I do?
<ErrorMessage name="email"></ErrorMessage>
I try with component={Custom} but don't work.
I use Tailwindcss.
Thanks if you want to help me.
To add a class to a React component, use className="theClass". Formik's ErrorMessage.component property takes a value of a custom component, e.g. component={Custom} as you have, or it can take an HTML container, e.g. component="div". Assuming this is not a Tailwind port to React, "div" is appropriate. Putting these two together, you can apply Tailwind-style invalid message styling thus:
<ErrorMessage name="emailAddress" component="div" className="text-red-500 text-xs italic" />
<ErrorMessage name="field name" component="div" className="some classes" />
add "component" field for ErrorMessage component
This method worked for me in react..
<ErrorMessage name='email' render={msg => <div className="error">{msg}</div>}/>
then, call that className in the CSS file
.error{
color: red;
}
So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below
LocationSearchBox.js
import React, {PropTypes} from 'react'
import {Button,FormGroup, FormControl} from 'react-bootstrap'
import styles from '../scss/components/LocationSearchBox.scss'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}>Get Weather</Button>
</FormGroup>
)
}
I am using css modules with web pack to convert my scss into css and than generate random styles to use in classnames for the components.
LocationSearchBox.scss
.navbarSubmitButton {
margin-left: 20px;
}
This used inside the component just adds some space between the input and submit button.
This is the NavBar component again with the help of react-bootstrap.
MainNavBar.js
import React from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
import styles from '../scss/components/MainNavbar.scss'
export default function MainNavbar() {
return(
<Navbar fixedTop className={styles.navbarColour} >
<NavbarBrand pullLeft >
<a href='#' className={styles.Brand}>Weather-app</a>
</NavbarBrand>
<Navbar.Collapse>
<Navbar.Form pullRight>
<Search/>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
)
}
Now I have created a homepage component and I want to use the LocationSearchBox component inside it.
Home.js
import React from 'react'
import {default as Search} from '../components/LocationSearchBox'
import styles from '../scss/components/Home.scss'
export default function Home() {
return (
<div className={styles.center}>
<h2>Enter a city and state</h2>
<Search />
</div>
)
}
The search component inside Home.js, the button has the same margin-left property was the navigation bar so it is moved to the right a bit. I don't want that to happen. I want it only to be applied to the search box used inside the navigation bar but I am unsure of how to do that with CSS modules and React components without creating a separate search box for the navigation bar but I see that as pointless when it will have the exact same code.
I feel like I am not using CSS modules correctly at all, I am not using its philosophy and the point of CSS modules correctly.
It's hard to say what the best approach would be without understanding why it needs to be visually different in those locations but generally I would update <Search /> to accept a new prop to conditionally apply the extra margin.
It could be theme if those two styles are likely to be used many times:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button>
Or if it's more of an override you could provides a buttonClassName prop to add exceptional styles at specific call sites:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>