score:5
the above code is confusing in that you want to apply styles to the dom style
property, but you're also applying them as css styles to a classname. there's no need to create this composed component because styled-components already handles as
, children
, and style
properties without composing:
example 1:
import react from "react";
import styled, { interpolation } from "styled-components";
export type textprops = {
as?: string | react.componenttype<any>;
children: react.reactnode;
styles?: interpolation<react.cssproperties>;
};
const component = styled.p<textprops>`
${({ styles }) => styles}
color: #000;
`;
export const text = ({
as,
children,
styles
}: textprops): react.reactelement => (
<component styles={styles} as={as}>
{children}
</component>
);
export default text;
example 2:
import styled from "styled-components";
const text = styled.p`
color: #000;
`;
export default text;
example 3:
import * as react from "react";
import styled from "styled-components";
export type textcomponentprops = {
classname?: string;
children: react.reactnode;
styles?: react.cssproperties;
};
const textcomponent = ({
children,
classname,
styles
}: textcomponentprops): react.reactelement => (
<p classname={classname} style={styles}>
{children}
</p>
);
const text = styled(textcomponent)`
color: #000;
`;
export default text;
usage:
import * as react from "react";
import box from "./box";
import text from "./text";
import text2 from "./text2";
import text3 from "./text3";
import "./styles.css";
const app = (): react.reactelement => (
<div classname="app">
<h1>example 1 - "styles" as css styles</h1>
<box>
<text styles={{ height: "10px" }}>hello</text>
<text as="h1">goodbye</text>
</box>
<hr />
<h1>example 2 - "style" as dom styles</h1>
<box>
<text2 style={{ height: "10px" }}>hello</text2>
<text2 as="h1">goodbye</text2>
</box>
<hr />
<h1>example 3 - "styles" as dom styles</h1>
<box>
<text3 styles={{ height: "10px" }}>hello</text3>
<text3 as="h1">goodbye</text3>
</box>
</div>
);
export default app;
on that note, it sounds like you might be trying to do something i did with composabled-styled-components, although i wouldn't recommend it because it doesn't work with ssr apps.
score:0
you could create a ref
on the styled component in order to set the style in an effect like this:
const component = styled.p`
background-color: red;
`;
const text = ({ as = 'p', children, styles = {} }) => {
const newstyles = object.entries(styles).reduce((acc, [key, value]) => {
return `${acc}${key}: ${value};`
}, '')
const ref = react.createref();
react.useeffect(() => {
ref.current.style = newstyles;
}, []);
return <component ref={ref} as={as}>{children}</component>
}
reactdom.render(<text styles={{ height: "10px" }}>this paragraph is 10px high</text>, document.getelementbyid('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script></script>
<script src="https://unpkg.com/react-is@17/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- How to pass styles via props with styled components without having to create the component inside the component
- How to Create global styles with Styled components in react and next js and is it better to use combination of css files and styled component?
- Styled components - How do I create a style that inherits a component and is able to send props to the parent?
- how to pass the data from data.json file in react components with the help of props in react js?
- How to pass styles from a child to the parent using styled components
- How can I create a custom page with #react-admin without the menu sidebar like login page?
- Share the same styles between two types of component with React Styled Components
- How to use custom props and theme with material-ui styled components API (Typescript)?
- How to pass props without rendering the component?
- How to use setFieldValue and pass the value as props between components
- Styled Components - two different elements with the same styles
- how to pass props to 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
- How to deal with the props and tightly coupled components in React?
- React how to pass onSubmit handler through props to the components
- How do I pass down components spread props with TypeScript?
- How to pass the props value from the other sibling components in React JS
- How to do overlapping styles with Styled Components React?
- How do I pass props to child without the use of modules?
- How to identify React components with the useInView hook and pass their values to a child component?
- How does react-router pass props to other components with <Links> and <Route>?
- How to pass props within components with react-router v6
- How do I pass components with the Context api?
- With React Styled Components, how do I declare the colour based on state collected via useSelector?
- How can I change the css property with styled components onClick?
- How to pass props to two tables with the same component
- How to get the props with onClick and pass with component in redux?
- How to extend Link and NavLink with same styles using Styled Components
- How can I mutate my state without having to reload the entire json object via the API
- How to pass multiple props to conditional rendered styled components
More Query from same tag
- Prevent pasting -, +, --, ++, +- into input number
- How to set a state varibale for a dynamically rendered component in React
- Adding Event Handlers/Props to inner markup in React
- Avoiding infinite useEffect loop while reflecting state change in React
- React JSX renders double quotes around element
- How to turn on react service worker when compatible?
- Proper way to wait for a function to finish or data to load before rendering in React?
- "What is causing this 'incorrect form submission' response to my simple node post request?"
- How do I style the Material-UI Menu Popover with JSS?
- CSS Loader seems to not to export anything
- Navigation Drawer in React-Native
- How to nest components under a common header
- Redirect wildcard route in NextJS
- Redirect to another page after GET call in modal form in React
- How to create File object from cloudinary url in JavaScript
- Using web components in react with only a CDN
- Javascript/Babel React Syntax for someFunction = (onClick) => {
- Gatsby + Hotjar : Env variables for Hotjar-Id & Hotjar-Snippet Version?
- Material-ui setting state values in form component not working
- How to make hover event on single component?
- Gatsby Stripe Checkout - multiple quantities
- Error while creating app using command prompt
- How to send a state into child component as dataset of D3.js object?
- Next-Slicezone 'module parse failed' when using with Prismic.io
- Lodash Js create a tree structure with arrays and objects
- How to make texts appear below icons in Buttons (Material UI)
- Flat List - ScrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed
- React hooks throttle on useLayoutEffect
- key is not available as prop in the Child component in ReactJs
- Can we use Material UI with Bootstrap 4