Questions tagged [rebass]
12 questions
3
votes
5 answers
How to style Rebass Switch
Using Rebass/Forms in react and I cannot properly resize the Switch component using styles properly. (I also am using @emotion/styled)
I have tried using a size attribute, but that does not give the desired effect of simply changing the scale of the…
amaster
- 1,915
- 5
- 25
- 51
3
votes
1 answer
Why using Rebass over Theme UI?
I chose Rebass as a component library for my app. Because Rebass is unopinionated about theming, it needs a theming library. Fine, I chose Theme UI to define my theme and then I started to build my app.
I quickly noticed that all the React…
ncuillery
- 14,308
- 2
- 22
- 31
3
votes
1 answer
Is it possible to use Style System's breakpoints inside a Styled-Component?
I would like to use styled-system's breakpoint and sizing mechanism inside a styled component.
Currently, I have to use 'react-media', which solves my problem, but this solution comes with a big amount of code duplication. Here is my current…
blaskov
- 56
- 3
2
votes
0 answers
How to change the breakpoints of Rebass?
I'm trying to change the default breakpoints, but it's not working. I followed the docs and used ThemeProvider, but Rebass is still using the default breakpoints. Instead of using emotion-theming, I use @emotion/react because of this error:
Error:…
Sir_Red_DAB
- 131
- 6
1
vote
2 answers
Make all children the same height inside a flexBox
I have a flexBox which has 2 children. 1 child is just an icon and it doesnt seem to take up the same height as the other child. Please advice me on a way to fix this.
Playground URL:URL
import React from "react";
import "./styles.scss";
import…
arunmmanoharan
- 2,535
- 2
- 29
- 60
1
vote
1 answer
Why does using prop.children on a Rebass Box component output a console.error in Chrome?
I have an app built with NextJS and I have a component composed from the Rebass Library which works, but it gives this warning in the console:
Here is the component:
// Container.js
import { Box } from "rebass"
export const Container = (props)…
Isaac Pak
- 4,467
- 3
- 42
- 48
1
vote
1 answer
Extending Components in rebass.js?
Beginner here. As of now I can use Box like so:
Box
and give it certain specified props, as it says on the site:
All margin and padding props
width:…
R. Kohlisch
- 2,823
- 6
- 29
- 59
0
votes
0 answers
Rebass Text and Heading Component Typography
Having issues with changing the default typography for the Rebass and components in the Theme. According to the Rebass docs the "Text and Heading components use a custom theme.text object." When looking at the types for the Rebass…
FractalLabs
- 75
- 6
0
votes
0 answers
Rebass not picking up values defined in Theme ui theme
My index file where I wrap the App component with the ThemeProvider
Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'theme-ui';
import App from './App';
import {theme} from…
Boris Grunwald
- 2,602
- 3
- 20
- 36
0
votes
1 answer
How to use dynamic class values like disabled or active with theme-ui?
So, I am using theme-ui and its theming capabilities, but i am new at it.
In my old way, I would just use package classNames and dynamically add styles depending on props or state etc..
ala...
const btnStyles = cn('plainButton', {
…
james emanon
- 11,185
- 11
- 56
- 97
0
votes
1 answer
How can I change rebass 'Text'(div) component to other semantic element?
The default HTML element for the Text component is div.
I'd like to change the Text component HTML element to other tags such as H1, H2, H3, and P for semantic.
How can I change the rebass Text component HTML element to other tags for semantic?
Daniel Li
- 170
- 1
- 12
0
votes
1 answer
ThemeUI's useThemeUI does not contain useColorMode
I'm trying to use themes in Rebass, and it suggested Theme UI for theming. After following the guide on the following, I cannot get setColorMode to work in my storybook.
import useColorMode
import React from 'react'
import { ColorMode,…
Daniel Cheung
- 4,779
- 1
- 30
- 63