The style focus doesn't work for LmInput in NextJs

[Nicolas Tamalu]

The style focus doesn't work for LmInput in NextJs.

Here is the repository with the minimum to check: https://github.com/tjapa/test-tamagui-extras

The code of the Custom LmInput:

import { GetProps, styled } from 'tamagui'
import { LmInput as TamaguiInput } from '@tamagui-extras/form'

export const CustomLmInput = styled(TamaguiInput, {
  backgroundColor: 'violet',
  borderColor: 'blue',
  color: 'red',
  focusStyle: {
    backgroundColor: 'green',
    borderColor: 'purple',
    color: 'yellow',
  },
})

export type CustomLmInputProps = GetProps<typeof TamaguiInput>

Result:

Expected:

[Dominic Garms]

Is this on Tamagui core element Input already the case? Then it would be ideal to open a ticket in that repo

[Dominic Garms]

Otherwise, did you try adding the props directly within the component?

const specialProps = {
  backgroundColor: 'violet',
  borderColor: 'blue',
  color: 'red',
  focusStyle: {
    backgroundColor: 'green',
    borderColor: 'purple',
    color: 'yellow',
  },
}
<TamaguiInput 
  {...specialProps}
/>

[Nicolas Tamalu]

Is this on Tamagui core element Input already the case? Then it would be ideal to open a ticket in that repo

This works in the Input from Tamagui core. The repository I created has an example with Input.

Otherwise, did you try adding the props directly within the component?

const specialProps = {
  backgroundColor: 'violet',
  borderColor: 'blue',
  color: 'red',
  focusStyle: {
    backgroundColor: 'green',
    borderColor: 'purple',
    color: 'yellow',
  },
}
<TamaguiInput 
  {...specialProps}
/>

That didn't work either.

[Nicolas Tamalu]

@dohomi Another problem that happened is that I am not able to use styled in the LmInputRhf component

[Dominic Garms]

Both components - LmInput and LmInputRhf - are complex components. I don't think styled would be supported unless a refactor will be done, probably with the new context API introduced by Tamagui some weeks ago. I would need to see how to do it but currently won't have the time for it.

[Nicolas Tamalu]

Both components - LmInput and LmInputRhf - are complex components. I don't think styled would be supported unless a refactor will be done, probably with the new context API introduced by Tamagui some weeks ago. I would need to see how to do it but currently won't have the time for it.

I understand. Anyway, thank you very much for the help and for the package.

[Dominic Garms]

Have a look at this two examples:
https://tamagui-extras.vercel.app/?path=/story/form-input--custom-focus-colors
https://tamagui-extras.vercel.app/?path=/story/form-react-hook-form--form-as-render-function

Both work perfectly fine with component props. Hope this fixes your issue.

[Nicolas Tamalu]

I don't know why, but when I tested passing it via props it didn't work, then it worked on the project I'm working on. I must have done something wrong the first time.