Comments (2)
I would not use inheritance, but composition. Something like this:
import styled from 'styled-components'
import { Button } from 'components'
const StyledButton = styled(Button)`
border-radius: 50%;
width: 40px;
height: 40px;
`
const RowActionButton = (props) => <StyledButton {...props} />
export default RowActionButton
The different SomethingButton
's should be molecules.
from arc.
Hey @diegohaz, I just wanted to share some things I've learned since exploring the styled-components more deeply.
First of all, thank you for pointing me in the direction, as I'm loving the explicit, compositional inheritance pattern using styled-components keeps you in. The code you describe in the above gist is how I've implemented most of the components I've tried so far (reworking the main layout and dashboard of the app I work on).
There's one particular case where I had to do things a little differently, and I wanted to share for others who might happen upon this issue.
There are times where you might need to share styles between components, but they can't be composed of a common ancestor. I ran into this when working on our horizontal nav components. Here's a subsection of those:
All but one of these are a styled version of the Link
component, and link to various sub-routes in the app. The exception is the icon that looks like a book...which links outside of the app to our documentation site. You cannot link outside of your react app to a different url using the react-router's link component, so you can't really do inheritance in a compositional way.
I got around this by using the styled-component's css template tag function to keep the styles that the two different types of components need to share in one place (so you don't have to edit things in two places when things change). I guess you could consider this a "mix-in" inheritance pattern. Anyways, here's what the code looks like:
import {Link} from 'react-router';
import styled, {css} from 'styled-components';
const consistentLinkCSS = css`
color: ${props => props.theme.interfaceText}
text-decoration: none;
border-bottom: 5px solid transparent;
padding: ${props => props.theme.pad * 2}px ${props => props.theme.pad * 2.25}px;
&:hover {
background: ${props => props.theme.navItemBackground};
border-color: ${props => props.theme.navItemBorder};
}
`;
// used for styling react-router links
const StyledLink = styled(Link)`
${consistentLinkCSS}
&.active {
background: ${props => props.theme.navItemBackground};
border-color: ${props => props.theme.navItemBorder};
}
`;
// used for styling links out to other websites (i.e. the docs link)
const StyledLinkOut = styled.a`
${consistentLinkCSS}
`;
Thank you for you explanation, it definitely pointed me in the right direction! And just as a note, right now, I'm just keeping everything in a components folder in my app, as that seems to be easiest while things are "small", but I'll definitely be exploring the atomic design way of structuring once things start to become too unwieldy.
from arc.
Related Issues (20)
- Running from dist HOT 1
- A lot of packages is out of date HOT 2
- Arc ssr (server side) CSS can not loaded. HOT 1
- r
- Error with import components HOT 6
- Looking for a Typescript version of components/index.js HOT 1
- Question about how 'components' is exported in the example project HOT 1
- GraphQl Branch HOT 3
- Updating to webpack 4
- Updating the SSR version to webpack 4 : new webpack config HOT 1
- Implement React Portals HOT 4
- Non root path build
- crashes on heroku, but not locally.
- injectGlobal is not supported
- `process.env` Object in config.js empty on Browser
- change crlf to lf
- Molecule inside molecule
- Discussion: are people still using Atomic design in 2021? HOT 2
- eslint bug
- Mui
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from arc.