I'm starting a new UI-library with bit.dev
However I can't find any information or docs on how to add a "global" Provider to these compoonents?
I have several apps I want to use this UI-library with different theme colors.
I don't want to hardcode the colors into each component so I want all my components to be wrapped in a "global" ThemeProvider of some sort to supply the colors.
How can you accomplish this with bit.dev?
Do I really wrap every single component with a ThemeProvider like this:
<ThemeProvider theme={theme}>
<Button {args}>
{args.children}
</Button>
<ThemeProvider>
That seems a little strange, and I want each app to be able to supply it's own Theme (not hard-code one into the ui-components library)
I also don't want to have to supply a theme to every single component I import in my library.
Ideally they will just pick up my already existing ThemeProvider w/ emotion-css, or worst case I have to add another Provider that supplies the theme to all my bit.dev components?
Would really appreciate some help on how to do this with bit.dev? I feel like I'm missing something simple.
Related
I was using the conventional import './App.css' and just use className to effect the styling for my react application.
I structured my react app to have a dashboard view component that renders the various dashboard components (profile, stats etc) so I had to import all the dashboard components to the view component and Link them using Routes.
But I noticed that the dashboard view wasn't displaying as I wanted it to, so I went to the inspect tab and to my surprise ALL the css styling of ALL the imported components which had corresponding classNames were affecting each other. So I decided to use .module.css which would render the styling exclusively, but this is my problem... my code is HEAVY and it is unproductive to change className="tool-links flex-column" to className={`${styles.tool-links} ${styles.flex-column}`} one after the other by hand.
Is there any tool I could use to do this over thousands of lines of codes effectively? Thank you. Pardon any typos
Having pondered about this question for 24 hours I discovered a walkaround.
Instead of changing from conventional css styling to css modules, I could just add a prefix to the class names to differentiate every styling from each other e.g( className="content" now becomes className="edit-profile-content" and no two classNames would be the same, and this could be done easily with VSCode Find and Replace tool. I think it's just common sense.
It's as simple as it sounds, I have checked everywhere, I want to be able to make a custom element that can get the theme from the parent ThemeProvider from material-ui so it can be directly integrated.
Thanks in advance and please let me know how I can make this question clearer in anyway!
I know it is not recommended to define styled components inside the render function (or inside stateless function components) because of the performance issues. However, I wonder if using the css method in a render function will also affect the performance negatively?
function Component = ({children, ...props) => (
<div css={`margin-bottom: 1rem`}>{children}</div>
);
Thanks!
After some testing, it appears that the css prop is similar to creating a memoized styled.element component. Component re-renders don't recreate the class name and state/prop manipulations act exactly same as a standard styled component -- when CSS properties have been altered, it either generates a new class or reuses an old one depending on how the CSS was changed. That said, the major downside to this approach would be that it requires babel-plugin-styled-components or babel-plugins-macro plus styled-components/macro to be added to your dependencies (if using styled-components/macro, it has to be imported into EACH file) which may or may impact application compilation times and make your application larger.
So, if you're OK with the above, then you shouldn't notice too much/any application performance difference. But, is it really worth the extra dependency/dependencies plus additional babel configuration to save yourself from doing this:
import styled from "styled-components";
export default styled.div`
margin-bottom: 1rem;
`;
which achieves the same result as above, but with less dependencies/less configuration/less effort. I don't know, that's up to you...
I am new to react and wondering using react with REBASS : https://github.com/rebassjs/rebass for ui component design and responsiveness, but syntax i say bothers me as they are objects created in render function.
Doesn't it will create unnecessary re-renders ?
if not why not. Not able to understand.
<Box css={**{color:blue}**} width={**[1,1/2,1/4]**} />
https://github.com/rebassjs/grid
Any thoughts?
In my thinking, you want to use the styling is react-app.
if you want make the other styles.css, you have to make it first, and then import the style.
For example, import ./styles.css -> this styles.css have to same located your react App. if you wanna change this, you can control by use './', '../'
and then --> comes from the style.css.
When you want to add the style, you have to use the "ClassName"
The other ways find this~! react_Style ways
Have a good day~!
enter link description here
We are using the Semantic React UI library. The code often looks like:
<div className="EditTemplateMetaDataPage">
<Page title={...}>
<Container text>
<Segment>
<Grid columns={1}>
<Grid.Column>
<Button ...>
This might be interesting for many people, using similar React Component libraries like Material UI or Bootstrap React.
We currently use mount with the enzyme library instead of shallow, because we would render only one level deep
, to the first <Grid> component in a test, which is just a visual helper, while we really need the deeper buried Button instead.
Because of performance and to avoid overlapping tests it is recommended to use shallow. (We follow London school TDD, and check only that sub-components exist and their interfaces are used properly)
We came up with using CSS-only for visual components, i.e.
<div className='ui one column grid'>
instead of:
<Grid columns={1}>
But we are not sure, whether this is the optimal approach. Do you have other ideas? How can we use shallow(...) in this case?
shallow actually allow you to use your component as selector, so you can do something like
import Button from '../Button'
const page = shallow(<Page />)
expect(page.find(Button).length).toBe(1)
http://airbnb.io/enzyme/docs/api/selector.html