question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create custom style prop or more prop to customize style

See original GitHub issue

Is your feature request related to a problem? Please describe. I add w-full class on Button component to use it by full width, but internal class w-fit ignore it.

 <Button type='button' className='w-full bg-primary-500' onClick={handleOpenAddView}>
   글 작성하기
 </Button>

image

Describe the solution you’d like maybe 2 option (just suggestion). Also, I think other components will need this option too.

  1. add width prop on Button component. then user can customize button component’s width
// for full width button
 <Button width='full'>
   sdfsdf
 </Button>

// for CTA button 🟩🟩🟩  🟦
<Button width='0.75'>
  🟩🟩🟩  
</Button>
<Button width='0.25'> 
  🟦
<Button>
  1. add custom style prop to customize free without priority issue
 <Button custom='w-full'>
   custom prop should have high priority then internal class
 </Button>

Additional context discord thread

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:8

github_iconTop GitHub Comments

2reactions
tulup-connercommented, May 28, 2022

We should document that behavior for sure ^

2reactions
rluderscommented, May 28, 2022

@emewjin the second option. 'Cause you will always complete overwrite the style that you are customizing on your own theme.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Customize React Components with Props
In this tutorial, you'll create custom components by passing props to your component. Props are arguments that you provide to a JSX element....
Read more >
Custom Props - Styled System
To change how a style prop value is transformed, provide a custom transform function. The function takes two arguments: (value, scale) , where...
Read more >
Customizing Material UI Styles with parameters and props
Source: https://github.com/truthseekers/ style -params-materialui/Join the fight: https://truthseekers.io/support-nuclear/
Read more >
How to pass custom style for props in react using the map ...
I created a prop object and passed data through the array. However is there any way i can pass the style through the...
Read more >
How to customize - Material UI - MUI
The sx prop is the best option for adding style overrides to a single instance of a component in most cases. It can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found