score:1
Accepted answer
in your app.tsx you can do the same:
const bluebutton = styled(button)`
background: blue;
`
what styled-components does is it creates a class with background blue and pass it to your button. so in your button.tsx you need to accept the css class
export default function button({ classname, children }: ibutton) {
const button = styled.button`
padding: 1em;
background: #ccc;
border-radius: 5px;
`
return (
<button classname={classname}>{children}</button
)
}
edit another way to do is to export the style like this
const basestyles = css`
padding: 1em;
background: #ccc;
border-radius: 5px;
`
const basebutton = styled.button`
${basestyles}
`
then later override the styles
const bluebutton = styled.button`
${basestyles}
background: blue;
`
Source: stackoverflow.com
Related Query
- Extend a Styled Component from a different file
- I have my modal component in a different file and I'm trying to open it from another component
- Import async function from different file to component
- Render react component from a different file
- React Warning: Cannot update a component from inside the function body of a different component
- How to extend styled component without passing props to underlying DOM element?
- You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports
- Import CSS File to Styled Component
- Reactjs how to change the state of a component from a different component
- TypeScript: Extend React component props for styled component element
- How to properly extend a styled component using TypeScript
- Styled components not overriding styles from another component
- MUI v5 - Seperate styling from component file
- what is proper way to import multiple components from same file in react instead of getting each component imported
- accessing variable from script tag in html file in react component
- How to import React component locally from a different create-react-app project?
- react js importing multiple component from a single jsx file
- How to get access to CSS values from a styled component (React)?
- React: Trigger method in child component from different child component
- Display data in a React component from an object where the keys are different but the values are the same
- Error when styling React components imported from index file, but not when importing directly from component file
- React.js - use DOM elements from different levels of component hierarchy
- What are the different types of props can be send from one component to the other using properties in React?
- Passing a variable from a jade file to a React Component
- redux-form warning Cannot update a component from inside the function body of a different component
- Open file dialog from React Component using Electron
- react-scripts build a file into `build` folder, from a different folder than `public`
- how to get a Component variable from another component but their both in the same file React
- Styled Component - How to prevent a prop from being passed to the extended component?
- Extend TypeScript 2.5.2 Component Props definition in a separate definition file
More Query from same tag
- Auto guess Profit/Loss from django and react
- Style react-slick.neostack
- Grunt, Jasmine, Phantom, React Unit Testing: React throws on ReactElementValidator
- Using requirejs to load React Components with a parent/child relationship
- How to set global style for a react-select.js
- React Redux Responsibilities
- react-google-maps change marker icon to waypoints
- Font-Awesome icons not changing color React
- GraphQL - retrieves only maximum 10 items from Strapi
- React material-ui TextField text align and hide cursor
- How do I mock a const method IN a component as part of an integration test?
- Rejection (TypeError): Cannot read property 'setState' of undefined, Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined
- React JS - Uncaught TypeError: props.video.map is not a function
- insertRow() and appendChild() equivalent in React
- redux dispatch action and reducer with new state
- Generic TypeScript Type for functions returning functions that replaces the ReturnType with the ReturnType of the returned function
- Filling a form dynamically in React
- Deploy React Craco app to GCP Cloud Run Error: React Refresh runtime should not be included in the production bundle
- react js button hide while click in button
- How to pass props to a material-ui styled component?
- How to detect matched route from a component outside of the <Route/> component that was matched using react-router?
- Webpack not found, deploying to Heroku
- How does React.useState triggers re-render?
- After websocket.close() funtion continues to run
- Calling one hook multiple times but running logic inside it only once for given render phase
- Correct way to pass data in JSX clicks
- Parse FormData [] with array of files - to Controller with saving to PSQL
- React router dom params issue
- Get Type Error: Cannot read property of undefined
- Trimble Maps Routing and SetCenter/Zoom not working