我正在尝试使用自定义主题修改 Keycloak 主题的登录页面。我需要重用使用react和{Component}'设计的主页设计（home.js）。
是否有任何可能的方法将此 js 文件或驻留在另一个 js 文件中的任何其他反应 component 导入我的自定义主题的 Keycloak 的 login.ftl 文件？
【问题讨论】：
标签： javascript html reactjs keycloak custom-theme
这是我的示例，我如何链接 freemarker 并做出反应： 输入.ftl
<#assign initialValue ="21/07/2019">
<div class="form-group">
<div id="flexInput-builder" data-initialValue=${initialValue}>
</div>
</div>
<script type="text/babel" src="/jsx/input-builder.jsx" ></script>
和 input-builder.jsx
class FlexInputBuilder extends React.Component {
state = { value: '' }
componentDidMount = () => {
this.setState({value: this.props.passedValue})
}
onChangeHandler = (e) => this.setState({value: e.target.value})
render() {
const {value} = this.state;
return (
<div>
<label>
Pick the date
<input value={value}
type='date'
className="form-control bg-light"
placeholder="pick your date"
onChange={this.onChangeHandler}
id={this.state.id}
/>
</label>
</div>
)
}
}
const elementID = document.getElementById('flexInput-builder');
ReactDOM.render(
<FlexInputBuilder passedValue={elementID.dataset.initialvalue}/>,
document.getElementById('flexInput-builder')
);
【讨论】：
【讨论】：
对于 keycloak，您需要自定义 keycloak 主题，您可以查看文档链接https://www.keycloak.org/docs/latest/server_development/index.html 我也在做同样的事情，为 react 项目的 keycloack 制作自定义主题我为此制作了主题，你可以查看我仍在研究它，所以现在没有自述文件。
我的 Github 链接仓库： 另一个 Github 链接：https://github.com/Alfresco/alfresco-keycloak-theme
您不能使用 react 组件修改 login.ftl，您需要在 keycloak/theme 文件夹中为其创建自定义主题。
自定义keylock主题有点麻烦，您需要了解第一个免费的制造商模板代码样式。
您也可以查看this blog 以获得更好的理解链接。
【讨论】：