To extend styled-system for other CSS properties that aren't included in the library, use the custom utilities to create your own style functions.
All styled-system functions rely on these low-level utilities.
style
creates a non-responsive style functionvariant
creates a complex style function based on style objects defined in a themeimport styled from 'styled-components'
import { style } from 'styled-system'
const textDecoration = style({
prop: 'textDecoration',
cssProperty: 'textDecoration'
})
const Link = styled.a`
${textDecoration}
`
Link.propTypes = {
...textDecoration.propTypes
}
export default Link
Read more in the custom utilities docs.