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={...}
...
/>
Related
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
I have a Material UI component, and I am trying to custom style it using the CSS.
Following is the code:
<IconButton className="my-class">
<Close />
</IconButton>
CSS:
.my-class {
float: right;
margin-left: auto;
margin-right: 0;
}
But I am not able to style it, when I tried the following, it works:
<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}>
<Close />
</IconButton>
Why I am not able to style the Material UI components using regular CSS?
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles.
You need to use the StyledEngineProvider exported from #mui/material/styles with the injectFirst option, in order for the CSS injection order to be correct. It is explained here.
So something like this shoud work:
<StyledEngineProvider injectFirst>
<IconButton className="my-class">
<CloseIcon></CloseIcon>
</IconButton>
</StyledEngineProvider>
You can style MUI components using several ways like GlobalStyles API, sx, styled or even normal way.
If you are going to style the particular component like IconButton, and if you have a look at the document for the API, you can find the class names for the component.
Here's couple of references.
https://mui.com/customization/how-to-customize/#main-content
How to give conditional style to MUI TextField?
I migrated from Material UI 4 to 5 Beta in my react app. From the documentation (docs style library) I can see that now I can use emotion, but when I use it I receive a message in the css attribute of the element where I use it.
My code:
import { jsx, css } from '#emotion/react';
//Other code.....
return (
<IconButton
css={css`
margin-left: 10px;
`}
//css={css({ marginLeft: 10 })}
aria-label='show 4 new mails'
color='inherit'
>
<Badge badgeContent={1} color='secondary'>
<MailIcon />
</Badge>
</IconButton>
)
If i inspect HTML, inside thebutton that is rendered i can see the attribute css like this css="You have tried to stringify object returned from 'css' function. It isn't supposed to be used directly (e.g. as value of the 'className' prop), but rather handed to emotion so it can handle it (e.g. as value of 'css' prop)."
I tried css prop with backtick and css function but none is working.
EDIT:
Changed marginleft into margin-left (this was an error while copiyng the code form my project)
I solved this ussues by adding /** #jsxImportSource #emotion/react */ in top of my import
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 am creating bunch of web-components, not sure how do I create common css for stenciljs web-components.
Based on documentation I can add globalStyle: 'src/global/app.css',
But it seems i can only share css variables. e.g.
:root {
--font_color: #484848;
--bg_color--light: #f9f9f9;
}
if I want to have common base css for buttons e.g.
button {
border-radius: 5px;
padding: 2px 10px;
}
Which i want to share across all the components | Not sure how to achieve that.
Thanks in advance for suggestions.
The globalStyle stylesheet gets distributed along with your app and can indeed be used to write global CSS. E. g. for the www output target, it gets generated as /build/<namespace>.css, and you can then include it into your app with a link:
<link rel="stylesheet" href="/build/my-app.css" />
However you can't use it to provide base css for elements that are inside a custom element with Shadow DOM enabled (i. e. if you have shadow: true in the component decorator).
So, as a solution you can use sass partials and modules to achieve what you're trying to do.
// src/styles/partials/_button.scss
button {
border-radius: 5px;
padding: 2px 10px;
}
// src/components/my-button/my-button.tsx
#Component({
tag: my-button,
shadow: true,
styleUrl: 'my-button.scss',
})
export class MyButton {
render() {
return <button>Click me</button>
}
}
// src/components/my-button/my-button.scss
#use '../../styles/partials/button';
The Stencil docs are a bit unclear on this issue. It took me a while to realize the globalStyle config doesn't actually do anything to apply global styles to components with shadow DOM.
If you wish to use the globalStyle globally across all components, you can try the following:
Link the globalStyle inside your index.html
Also link the globalStyle inside each of your components
The components may seem strange with a style link, but it actually works.
render() {
return (
<Host>
<link rel="stylesheet" href="/build/my-app.css" />
RENDER THIS COMPONENT WITH GLOBAL STYLES
</Host>
);
}