score:9
Accepted answer
create generic styles that you can reuse
you can extract and pass styles as string args to a styled component.
const buttonstyles = `
color: red;
...
`
const styleda = styled.a(buttonstyles);
const styledbutton = styled.button(buttonstyles);
if you need some exceptions
import styled, { css } from ‘styled-components’;
const baseinputstyles = css`
padding: 0.5em;
`;
const styleda = styled.a`
${baseinputstyles}
`;
const styledbutton = styled.button`
${baseinputstyles}
/* make changes as needed*/
`;
score:0
i tried joe lloyd's answer but it didn't work because the function styled.xxx()
takes one parameter of type templatestringsarray
instead of template string
:
const buttonstyles = [
`
color: red;
...
`
]
const styleda = styled.a(buttonstyles);
const styledbutton = styled.button(buttonstyles);
Source: stackoverflow.com
Related Query
- Styled Components - two different elements with the same styles
- Share the same styles between two types of component with React Styled Components
- Using Styled Components with nested styles for React Search Bar, trying to place two different SVGs at opposite sides of the search bar
- React and React Router, rendering the same element twice with a different prop results in two elements with the same prop?
- Two components with the same state/functions but different UI
- Why is it not possible to have the same name of two StaticQuery elements on two different layouts for Gatsby?
- How to Bind different react components with the same react-router route depending on redux state?
- How to pass styles via props with styled components without having to create the component inside the component
- Approach for different HTML structure with React and using the same components
- SignalR in ReactJS - work with the same hubConnection within different components
- What's the correct way to render React components with different styles such as Navbar using React Router 6v?
- React Router: How to render different components with the same route conditionally
- Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Laravel React JS
- Two routes with different query strings for the same component
- Are two actions/reducers with the same name permissible in two different reducer files?
- ReactJS Warning: Encountered two children with the same key after changing components
- How to extend Link and NavLink with same styles using Styled Components
- How to place two tables in the same view with different data?
- my page is not rendering with different id on the same page when i use link in react components
- Merge objects from the same array by two with different keys
- Trying to use react to trigger different components with the same function
- In React's Flux how to use a store, when two components need different data from the store at the same time?
- How do I style the elements of the same div with a different widths
- How to mock the same function called in different components with different returned values
- Make two elements the same height dynamically with CSS
- What is the best way to compare two HTML pages with same data but different markup
- Many components with the same reducer but different initial state
- Jest mock the same function twice with different arguments
- Add space between two elements on the same line
- Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider error with @react-navigation/stack
More Query from same tag
- Dynamically create css classe in React
- React Component not updated when state changes
- Electron-compile how to use scss or at least css with react?
- Can I put class base components inside function base components to use react hooks?
- React-Webpack-production build is not working on nginx
- Passing props twice for a Higher Order Component?
- How to read and display JSON
- What typescript type should I use for Reactstrap Input Ref?
- React js convert css to css for react
- IE 11, Data from server not update
- How to refresh powerbi-client-react component once token has expired?
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'BGColors'
- Webpack: npm start "Module not found: Error: Can't resolve ..." after moving location for webpack / react files
- Unable to bind onChange function in React
- Update a state property based on name
- How to affect child elements styles from a React library?
- How to Debug a React App in Visual Studio 2019 using the "Blank Node.js" Template
- Turn blob into wav file
- Select only one plan at the time React State Hook
- Uncaught TypeError: Object(...) is not a function when invoke createStore
- On Firefox, when asking to mount an iframe into the DOM, the thread continues to next instruction before waiting for the iframe to be mounted
- How to manage title, meta tags, etc, inside React with server rendering + streaming?
- Uncaught Invariant Violation: query option is required. You must specify your GraphQL document in the query option
- Why aren't jest tests passed while using react fragments?
- Geocode Earth Autocomplete Box Without Map
- UnCaughtType error in REACT,js when hooking the eventhandler
- Add multiple objects to an array?
- Redux page breaks in Android WebView in Kitkat
- Why doesn't <Table/> show the check box when rendered multiple times?
- Difference between usePreviousDistinct with useEffect and without