Various libraries offer styling solutions via props of components, while the "standard" way for a long time has been to write CSS, separately.
With the invention of CSS-in-JS, it's now possible to have some benefits we didn't have before (e.g string literals, conditional classes, plugins to extend functionality, etc.), and on the separation level, it can be used like CSS style tags in HTML, where it's possible to define in the "main" file (HTML, in the case of CSS) an environment to write the code in, and we have more flexibility, but with JSS, for example, it's a common practice, from my understanding, to centralize the styling code in a classes object.
On the other hand, we can write not just inline CSS in components, but various libaries offer styling solutions as props of components such as Material-UI.
So, my question is:
what advantages pros and cons do you think there are for writing CSS-inJS compared to writing styling code using component props?
*Disclaimer: I don't have a lot of experience with CSS-in-JS and styling in React in general, so I might have a wrong impression of what things are like generally/in the bigger picture.
*Do notice that I'm not asking about inline-CSS in components and that this is not an inline vs non-inline question, but a more specific one.
You ask about the Pros/Cons for those cases:
Dynamic className
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
export default function App() {
const classes = useStyles();
return <Button className={classes.root}>My Button</Button>;
}
Which is just a nicer implementation of:
import './myStyle.css'
export default function App({ styleName }) {
return <Button className={styleName}>My Button</Button>;
}
Pros:
Simple and straight forward.
Cons:
Writing CSS-like object (not real CSS).
Such implementation is decoupled to the UI library
There may be a library that can be used across projects, but still, why just not using CSS-in-JS with it is the case?
CSS-in-JS
const PrettyButton = styled(Button)`
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border: 0;
borderradius: 3;
boxshadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
color: white;
height: 48;
padding: 0 30px;
`;
export default function App() {
return <PrettyButton>My Button</Button>;
}
Pros:
Writing a real CSS (you get auto-complete, CSS formatting, style-linting, not writing string literals which are error-prone, etc.)
CSS-in-JS benefits (Google it).
Cons:
The debate of why not to use CSS-in-JS (Google it).
Pass the classes around.
Passing CSS like props to component is not gonna work .
Related
Apologies about the vague question in the title, but I've been learning how to build and style dashboard's in plotly dash using CSS for several months now and I've always struggled when trying to style dropdown menus. That is until I tried to replicate this dashboard using this code because I liked how the dropdown looked:
It appears that the code that controls this is in the custom-styles.css file and looks like:
.Select-menu-outer {
background-color: #2f3445;
border: 1px solid gray;
}
.Select div {
background-color: #2f3445;
}
.Select-menu-outer div:hover {
background-color: rgba(255, 255, 255, 0.01);
}
.Select-value-label {
color: #a5b1cd !important;
}
But neither '.Select-menu-other', '.Select div' or '.Select-value-label' appear in the python files as a className (or at all for that matter), so I'm a bit confused because I thought in CSS the dot notation was used to create a class that would then have to be called from Python but it's as if these are pre-assigned classes.
So my questions are:
What are these classes? Are they pre-assigned and in what language? Is there any documentation on them?
Are there any other classes of this type that can used to control the styling of Radio Items, Sliders or Date Range Pickers etc?
If I'm following somebody else's code how do I know if they're using a pre assigned class or a class that needs to be called explicitly
It looks like they might be something to do with Javascript but I couldn't find any documentation on them but I could be wrong so any help would be appreciated.
I'm using web components, mostly written with lit-element and lit-html, and they use the Shadow DOM.
Some components have buttons and other interactive parts which have the default focus outline.
When I build an app, i like to set a page-wide rule to change the focus outline to a color that clearly stands out from the page's background colors.
*:focus {
outline: 2px solid lime;
}
i was expecting this to flow over shadow boundaries into the web components, similar to color and font-size, but it does not
considering that outline does not cross the shadow boundaries — what options do i have to achieve my consistent focus outline color?
Standardize CSS variable --focus-outline in your app
application-level:
* {
--focus-outline: 2px solid lime;
}
*:focus {
outline: var(--focus-outline);
}
example component usage:
*:focus {
outline: var(--focus-outline, 2px solid #0af);
}
every component must be refactored to accept this variable
each component will have to define its own fallback like 2px solid #0af (unfortunately there is not yet any standardized default-focus-outline css value)
How can I use next 2 CSS examples in React to act exactly as I would do it in plain CSS/HTML, but without using danerouslySetInnerHTML:
#media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
I did tried to Google those 2 cases but there wasn't anything that covers them.
EDIT: There is much more css behind the scene and I want to transform that css and html to React component. The problem is that I don't know how to transform media query from plain CSS into React. I want for that media query to be applied on entire Component. I know how to transform CSS to React in general, but I have this specific situation (I am still new to React) when there is media query and grouping selectors and I don't know how to transform those in React to be used in that component for only that component.
The danerouslySetInnerHTML is not a proper way to add CSS to a react application, there are many ways to add CSS, for example I use PostCSS preprocessor and for example Less, Sass, SCSS, JSS and many other ways are exist that you can use them, But if you just wanna run a test, make a style tag and put these two CSSes in it and absolutely your browser find it out and show you the results like plain HTML/CSS.
Do like this below code:
<style>
#media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
</style>
And put it in your code. Undoubtedly it works.
But with your more explain and editing the question, I understand that you need JSS for your work, for more information visit this link
You can use in inside of your react app with less complexity. you can prepare your CSSes just like you want, as a JavaScript object:
const viewPortSizes = {
height: "100vh",
width: "100vw",
};
And then use it in your JSX tags.
Hope it helps you.
while working with styled-components i was trying to create a function with some inputs returning a css tagged function which needed some specific keyframes (tightly coupled with my css tag function).
I ended up defining my keyframes inside the function to have access to the closure and was asking my self if the fact to redefine each time my keyframes for each call of the function could be expensive in terms of performance, and if there was a better way to handle this case.
Here is a snippet which illustrate what I try to explain, of course my question make only sense for a much bigger and complex keyframe than this one :
const growBorder = (color, from, to) => {
const grow = keyframes`
from { border: ${from} solid ${color}; }
to { border: ${to} solid ${color}; }
`
return css`
border: ${from} solid ${color};
animate: ${grow} 3s linear 1s infinite alternate;
`
}
const Button = styled.button`
${growBorder('purple', '1px', '3px')}
`
const UglyButton = styled.button`
${growBorder('red', '10px', '30px')}
`
...
The answer is yes. Creating keyframes like yours is expensive.
If you look at the definition of keyframes inside styled-components, you can see that every time styled-components sees a keyframes helper, it hashes the content of the keyframes declaration. If no match is found (as would be the case for dynamic keyframes like yours), it will inject a new style rule into the document's style sheet, forcing a global reflow.
I'm trying to develop a library of reactjs components in order to be reusable by different projects.
This components besides the functionality itself, must have a theme with different css styles.
I could write a css file, but then I must import the css in every project I will use any of that components. I need to set the style of this components inside itself, so when I import it in other project, I will looks exactly as I expect.
Is there any ReactJS library (or plugin perhaps?) to compile this styles inside the component or maybe apply a style on the componentDidMount?
EDIT
I forgot to add that I'm using MaterialUI. which is a framework that implements Material Design for React.
It provides different components which it own styles, and I can modify some of them, but not all.
Since Material UI create a big HTML I cannot add inline styles, that's why I need to add a selector to apply styles from React directly
Meterial UI provides something like that, so I guess is possible. This is how I configure in Material UI
const muiTheme = getMuiTheme({
palette: {
textColor: cyan500,
},
appBar: {
height: 50,
},
});
Sadly only some styles are supported by this, and not all I need
If you use webpack for your transpiling, you can create a separate stylesheet for the component and then import it.
Example:
import './componentStyle.css';
Then setup your component style in that CSS. The component would need both the jsx and css files each time you use them in different projects, but you can easily customize the css for each project if you need, and you can use css classes instead of inline styles.
Your webpack.config.js would need to have this:
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
If you created application with npx create-react-app then
Import your styles from *.module.css file. Example: import styles from './component.module.css' with content .ssss { color: red }
Apply your style using {styles.ssss}. Example: <div className={styles.ssss}>
MaterialUI now includes CSS-in-JS docs functionality that will allow you to do just what you're asking.
you probably want to do something like what they suggest and make use of their HOC API:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
};
function HigherOrderComponent(props) {
const { classes } = props;
return <Button className={classes.root}>Higher-order component</Button>;
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(HigherOrderComponent);