I was always wondering how to make component with different sizes using SASS in React.
These are from airbnb, and let's assume these are same components.
The first one is 520px and the second one is around 130px.
If there exist these two sizes only, I know I can adjust the size using different className.
But what if I need different sizes more than two? like 300px, 400px and etc? Is it the only way to set className every time?
I could pass style prop to component, but it's CSS in JS so I think it becomes meaningless to use SASS.
How do others work with SASS in this kind of situation? I can't shift to Styled component now.
I would go with dynamic className and a prop size. Something like this:
const Button = ({ size, ... }) => {
[...]
return (
<button className={`button-${size}`}>
[...]
</button>
);
}
Button.propTypes = {
size: PropTypes.oneOf([
"small",
"regular",
"large",
]),
...
};
Button.defaultProps = {
size: "regular"
};
In you styles:
$buttonSizes: (
small: 300px,
regular: 400px,
large: 500px,
);
button {
#each $sizeName, $size in $buttonSizes {
&-#{$sizeName} {
width: $size;
}
}
}
Related
In my react js application i have a component where i want to set the mobile break pint according to a variable:
<Component size={'500px'}/>
const Component = ({size}) => {
return (
<div md:flex>hello</div>
)
}
I want to add instead of md:flex something like [size]:flex to be able to set break point according to that props.(ex: set display flex if the size is 500px or 100px or 900px) Question: Is there possible to set the mediaquery according to the way that i described above?
You could use classnames npm package:
const rootClassName = cn(
// you can add any tailwind classNames first
"h-full flex flex-col",
// this is conditional part. based on size prop, define className
{
[md:flex-1]: size === "A",
[sm:flex-1]: size === "B",
}
)
I am using MUI for UI.
I have some options, given in image below:
It is perfect till now. But I want to move options container to more bottom. (Currently it is set as top: 64px which is default).
I want to set it as top : 100px. After setting, it will look like :
I have tried to achieve this, but css didn't apply.
const useStyles = makeStyles((theme) => ({
userAge: {
"& .Mui-focused": {
"body .MuiPaper-root": {
top: "100px !important" // 64px is default
}
}
}
}));
//jsx return
<FormControl fullWidth className={classes.userAge}>
// more code here
</FormControl>
You can also try here : https://codesandbox.io/s/funny-shannon-h6flch?file=/demo.tsx
Note :
I don't want to set top : 100px globally.
Made some changes to your codesandbox. Hope it helps ;)
Styles need to be applied to menu via MenuProps and then applying class based styles to paper
https://codesandbox.io/s/change-the-default-position-of-options-in-mui-stackoverflow-lm9mxn?file=/demo.tsx
I want a larger value for padding right than tailwind currently offers (pr-96 which is around 24rem) I’d like something around 40rem for my project.
Following documentation, I tried, but I cannot run npm run build without an error.
// tailwind.config.js
module.exports = {
theme: {
padding: {
xxl: 'padding-right: 40rem',
}
}
}
’’’
Error:the xx class does not exist, but xx does.
If I remove the code I added above, error goes away.
You don't need to specify the property padding-right in your creation of the xxl utility only the value and unit, this line:
xxl: 'padding-right: 40rem'
should be:
xxl: '40rem'
This will give you an xxl size of 40rem for all padding classes p-xxl, pr-xxl, pl-xxl, etc...
However, you should only use padding as a direct child of theme when you want to replace all padding utilities. If you wanted to just add this size to the existing padding sizes you should use extend inside theme like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
padding: {
xxl: '40rem'
}
}
}
}
carousel-3d(:display="3", :width="150", :height="150")
I want to set the attribute bindings based on a media query
e.g.
display should become 5 when screen width > 960px
You could try binding the display value to a component property:
<carousel-3d :display="display">
...and then update that property on window resize:
...
data() {
return {
display: 3
}
},
methods: {
onResize() {
if (window.innerWidth > 960) {
this.display = 5
} else {
this.display = 3
}
}
},
created() {
window.addEventListener('resize', this.onResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.onResize)
},
...
I struggled to find any solutions with Vuejs alone myself or if at all that are there, are already too complex. Involves a lot of unnecessary work where things can be done neatly and in CSS.
That solution is styled components or for a matter of fact any CSS in JS solutions to handle such things with ease.
For example in styled components your styles are written inside ES6 template literal.
import styled from 'styled-components';
import breakpoint from '../utils/breakpoint.js';
const YourStyledComponent = styled.div`
width: calc(100% - 30px);
#media (min-width: ${breakpoint.SM}px) {
// Your media styles
}
`;
Then inside your Vue component use it as a normal component. You can pass it props as well. Do read more about it - Vue-styled-components.
Doing this way you are using just CSS for styling everything. It's a must for front-end development considering the performance. I think it's a long time since we stopped adding eventListeners to Javascript related to styling or handling layout.
I'm using react and material-ui in my project and I have come across a simple issue that I just dont't know how to solve.
I want to create a drawer and set its height in a way that when it will open, it wont open over the app bar.
There is no parameter in the Drawer component for the height, I also tried to override its style and setting up the height on the style object like this :
<Drawer style={{height:'90%'}} />
But it didn't work.
The only way I can think of, is editing the code of the Drawer component, but ofcourse I want to avoid that.
Any idea on how I can define the height?
Here you go:
<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
containerStyle is prohibited in version 1.0 and above
So you need to use props classes instead
Here is an example to this nontrivial case
import {withStyles, createStyleSheet} from 'material-ui/styles'
const styleSheet = createStyleSheet({
paper: {
height: 'calc(100% - 64px)',
top: 64
}
})
class CustomDrawer extends Component {
...
render () {
const classes = this.props.classes
return (
<Drawer
classes={{paper: classes.paper}}
>
...
)
}
CustomDrawer.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styleSheet)(CustomDrawer)