I'm trying to increase the size of the react-bootstrap switch but it doesn't seem to work.
I tried reading the docs and looking it up but I couldn't find any other way apart from changing the bootstrap css directly.
Here's the code:
import Form from 'react-bootstrap/Form';
function SwitchExample() {
return (
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
/>
</Form>
);
}
export default SwitchExample;
Thanks for reading.
you can change switch size in css
.form-switch .form-check-input {width: 4em; height: 2em;}
and import css file to your project
Related
I know that must be the way, where it possible to avoid overwriting any component (DOM node) styles with only inline styles (via style attribute), but instead make it much more readable and clean via css attribute. For example:
<StyledInput
css="width: 300px; border: 2px solid red"
value={state.value}
onChange={...}
...
/>
Unfortunately I couldn't find any references for this solution. It may be related to Styled Components.
You may use third-party npm package transform-css-to-js
In the terminal
npm i transform-css-to-js
In your Parent file
<StyledInput
css=`width: 300px; border: 2px solid red`
value={state.value}
onChange={...}
...
/>
Note: Here is used backticks instead of string
In your StyledInput file
import cssToJS from "transform-css-to-js";
import {TextInput} from 'react-native';
//other imports here
const StyledInput = (props)=> {
const transformedCSS = cssToJS(props.css, true);
return (
<TextInput {...transformedCSS} />
)
};
Note: Here I am assuming you want to use css styles in your TextInput and not in a View or some other tags. Please remember TextInput only takes a limited number of styling options as props. RN Official docs have the list of allowed props. In case you want to use it in a View then just spread it like so
<View style={{...transformedCSS}}>
</View>
The prop 'style' is already readable and is standard across all component libraries. Why would you want to go back to css?
To me personally, this is the cleanest way.
<StyledInput
style= {{width: 300; border: `2px solid red`}}
value={state.value}
onChange={...}
...
/>
I'm trying to override the margin attribute of a Separator component using Microsoft's Fluent UI using React. The top-margin appears to default to 15px and I would like it to be less than that.
Here's a screenshot:
The beige color section above is defaulting to 15px and I'd like to shrink it but I can't seem to find the correct css to do so.
Here's the code I have thus far:
const separatorStyles = {
root: [
{
margin: 0,
padding: 0,
selectors: {
'::before': {
background: 'black',
top: '0px'
}
}
}
]
};
export default class Home extends Component {
render() {
return (
<Stack verticalAlign="center" verticalFill gap={15}>
<Component1/>
<Separator styles={separatorStyles} />
<Component2 />
</Stack>
);
}
}
I've tried placing the margin: 0 where it currently is at the root level and also nested below the ::before but neither have worked.
The only other potential clue I have comes from an inspection of the styles in Chrome's DevTools which yields:
Any ideas would truly be appreciated!
Thanks for your time!
The 15px actually came from the gap prop that was passed to the Stack component. It takes care of adding that css class to children elements to ensure the proper margins exist.
I believe removing it altogether should solve your concern, such as in this example (link to working code):
<Stack verticalAlign="center" verticalFill>
<button>Button1</button>
<Separator>no margin</Separator>
<button>Button2</button>
<Separator />
<button>Button3</button>
</Stack>
However, it is worth noting that the Separator expects to render some text, so you might have trouble getting it to be the exact height you want (as font-size is a concern for the Separator). If that's the case, you might be better off just making your own control to render a 1px line with a simple div or span.
Also you can you use this approach with styled-component:
import React from 'react'
import {Separator} from '#fluentui/react'
import styled from 'styled-components'
const StyledSeparator = styled(Separator)`
&::before {
margin-top: 15px;
}
div {
//any styles for separator-content
}
`
export const Divider = ({children}) => {
return <StyledSeparator>{children}</StyledSeparator>
}
I'm creating a simple React app (using create react app as a starting point) in which the App.js returns the following:
return (
<div className="App">
<NavBar />
<Main />
</div>
);
}
export default App;
I'm attempting to add an image to Main with the following:
return (
<div className="bg">
<LogInSignUpModal />
</div>
);
}
export default Main;
In the file Main.css I have the following:
/* The image used */
background-image: url("../../images/WorkoutRack.jpg");
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Unfortunately the image won't appear in the main component (the main component is supposed to take up the entire page below the NavBar. I've tried many different solutions found in other StackOverflow responses but none have worked. What am I missing here?
Hi we can load the image in couple ways in react components itself
import react from 'react'
import imageName from './location/of/image'
class App extends react.Component{
render(){
return(
<img src={imageName} alt="imagename"/>
}
}
2nd way is to using require
All code are similar but instead of importing, require it
import react from 'react'
Const imageName = require ('./location/of/image')
class App extends react.Component{
render(){
return(
<img src={imageName} alt="imagename"/>
}
}
First check this answer:
React won't load local images
If that was not fault, check your parent style or use px for with and height.
Images included in css files are going to taken from the public folder, not the src one.
So make your url relative to where the files are stored within the public folder, including the css in the public file too should make it even easier.
If someone has doubts about this, I'll gladly reply to you in the comments.
First, let me say I understand that I have a custom component "Card" that I use in one of my routes, "Home".
Card.js
import s from 'Card.css';
class Card {
...
render(){
return (<div className={cx(className, s.card)}>
{this.props.children}
</div>);
}
}
Card.css
.card {
display: block;
}
Home.js
<Card className={s.testCard}>
...
</Card>
Home.css
.testCard { display: none; }
A problem I faced here, is that the card remained visible even though I set the display to none, because of seemingly random CSS ordering in the browser. This ordering did not change even if Javascript was disabled.
To get .testCard to correctly load after .card, I used "composes:":
Home.css
.testCard {
composes: card from 'components/Card.css';
display: none;
}
Apparently this causes css-loader to recognize that .testCard should load after .card. Except, if I disable Javascript, the page reverts back to the old behavior: the .card is loaded after .testCard and it becomes visible again.
What is the recommended way to get our page to prioritize .testCard over card that behaves consistently with or without Javascript enabled?
As I'm using CSS modules, charlietfl solution wouldn't really work as is. .card is automatically mangled to a name like .Card-card-l2hne by the css-loader, so referencing it from a different component wouldn't work. If I import it into the CSS file of Home.css, that also doesn't work, because it creates a new class with a name like .Home-card-lnfq, instead of referring to .Card-card-l2hna.
I don't really think there's a great way to fix this so I've resorted to being more specific using a parent class instead.
As an example, Home.js:
import s from 'Home.css';
import Card from './components/Card';
class Home {
...
render(){
return (
<div className={s.root}>
<Card className={s.testCard}>Hi</Card>
</div>
);
}
}
Home.css
.root {
margin: 10px;
}
.root > .testCard {
display: none;
}
This way, we don't need to know what class names component Card is using internally, especially since in cases like CSS Modules or styled components, the class name is some unique generated name.
I don't think I would have come to this solution if it wasn't for charlieftl's solution, so thank you very much for that.
Just make the testCard rule more specific by combining classes
.card {display: block;}
.card.testCard { display: none; }
When I open my react app, the component below flashes with width:100%, probably because it inherits it from the material-ui card.
In my react app there are a lot of these components being rendered, each with their own width which are based on the parent component's data. I set the width with an inline style based on the props.
As I understand, the component has the inline style as it is created and there should be no delay to apply it. However I see all the SceneThumb components with 100% width for a a fraction of a second, before they apply the given inline style.
If I change the css of scene-thumb-parent to include some width, say 10% for example, then I'll see them all with 10% for a fraction of a second, before the inline style is applied. That makes me think there is a delay in applying inline css, but it really puzzles me..
Is this to be expected of react? Or of html in general? Is there any way to reduce this inline style application delay? Maybe it's something to do with the dev hot reloading setup I get from create-react-app?
SceneThumb.js (code that is irrelevant to the question has been omitted):
import React, { Component } from 'react';
import './scene-thumb.css';
import Card from 'material-ui/Card';
class SceneThumb extends Component {
render() {
return (
<div
className='scene-thumb-parent'
style={{width:this.props.width, left:this.props.left}}
>
<Card
className={this.props.selected?'scene-thumb-selected':'scene-thumb'}
>
<span>
Hello world!
</span>
</Card>
</div>
);
}
}
export default SceneThumb;
scene-thumb.css:
.scene-thumb-parent {
position:relative;
text-overflow:clip;
white-space:nowrap;
overflow:hidden;
min-width: 12px;
}
.scene-thumb-selected {
border: 2px solid red;
border-radius: 5px;
}
.scene-thumb,.scene-thumb-selected {
padding: 2px;
margin:2px;
position:relative;
}
The width prop is initially null or some other value. A moment later, the prop is updated which triggers another render. This is why you're seeing the flash you're talking about.
You can test this by adding the following to your render() function:
console.log(this.props.width)
You'll probably see it logging at least twice with different values.
There are many ways you can fix this. What makes most sense would depend on the rest of the application, and your personal preference. Regardless, here's one way:
render() {
if(!this.props.width) return null; //if it's null, render nothing.
return (
<div className='scene-thumb-parent' style={{width:this.props.width, left:this.props.left}}>
<Card className={this.props.selected?'scene-thumb-selected':'scene-thumb'}>
<span>Hello world!</span>
</Card>
</div>
);
}